@extends('dashboard.layouts.master')
@section('title', 'Country Management| Admin Panel')

@push('after-styles')
    @if (Helper::checkPermission('country', 'edit'))
        <style type="text/css">
            #blah {
                height: 50% !important;
                width: 25% !important;
            }

            #blah1 {
                height: 50% !important;
                width: 25% !important;
            }

            input[type="time"] {
                cursor: pointer;
            }

            .product-single-variant {
                margin: 30px 0 10px 0;
                padding: 20px 0px 0 0;
            }

            .product-single-variant:not(:first-child) {
                border-top: 1px solid gray;
                /* border-bottom: 1px solid gray; */
            }

            .product-single-variant:last-child {
                /* border-top: 1px solid gray; */
                /*border-bottom: 1px solid gray;*/
            }

            .error {
                text-align: left;
                display: block;
                color: red;
            }

            .newColoradded .form-check-input {
                margin-left: 0;
            }
        </style>
        <link href="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

        <!--[if lt IE 9]>
                            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
                            <![endif]-->

        <style type="text/css">
            .error {
                color: red;
                margin-left: 5px;
            }
        </style>
    @endif
@endpush

@section('content')
    @if (Helper::checkPermission('country', 'edit'))
        <div class="padding edit-package">
            <div class="box">
                <div class="box-header m-b-2">
                    <div class="box-header-left">
                        <h3 class="d-block"> Edit Country
                        </h3>
                        <small class="d-inline-block">
                            <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / <a
                                href="{{ route('country') }}">Country Management</a> /
                            <span>Edit Country</span>
                        </small>
                    </div>
                    <div class="box-header-right">
                        <div class="box-tool">
                            <ul class="nav">
                                <li class="nav-item inline">
                                    <a class="nav-link" href="{{ route('country') }}">
                                        <i class="material-icons md-18">×</i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="loader"></div>
                <div class="box-body">
                    {{ Form::open(['route' => ['country.update'], 'method' => 'POST', 'files' => true, 'enctype' => 'multipart/form-data', 'id' => 'storeForm']) }}
                    <div class="personal_informations">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-control-label">Name<span class="valid_field">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control" maxlength="30"
                                        placeholder="Name" value="{{ $country->name ?? '' }}">

                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-control-label">Short Name<span class="valid_field">*</span></label>
                                    <input type="text" name="short_name" id="short_name" class="form-control"
                                        maxlength="30" placeholder="Short Name" value="{{ $country->shortname ?? '' }}">

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-control-label">Phone Code<span class="valid_field">*</span></label>
                                    <input type="text" name="phone_code" id="phone_code" class="form-control"
                                        maxlength="30" onkeypress="return isNumberKey(event)" placeholder="Phone Code"
                                        value="{{ $country->phonecode ?? '' }}">
                                </div>
                            </div>
                            <input type="hidden" name="id" id="country_id" class="form-control"
                                value="{{ @$country->id }}">
                            <div class="col-lg-12 col-md-12">
                                <div class="form-group m-t-md">
                                    <button type="submit" class="solid-button m-r-1" id="submitDetail"> Update </button>
                                    <a href="{{ route('country') }}" class="border-btn">
                                        {!! __('backend.cancel') !!}
                                    </a>
                                </div>
                            </div>
                        </div>


                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    @else
        <input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
        <script type="text/javascript">
            var redirect_url = $('#redirect_url').val();
            window.location.replace(redirect_url);
        </script>
    @endif


@push('after-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">

    <script type="text/javascript">
        function isNumberKey(evt) {
            var charCode = evt.which ? evt.which : evt.keyCode;

            if (charCode >= 48 && charCode <= 57) {
                return true;
            }
            return false;
        }
        var test = $("#storeForm").validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 30,
                    remote: {
                        url: "{{ route('checkNameExist') }}",
                        type: "POST",
                        data: {
                            name: function() {
                                return $("#name").val();
                            },
                            id: function() {
                                return $("#country_id").val(); // hidden input with record id
                            },
                            _token: function() {
                                return $('meta[name="csrf-token"]').attr('content');
                            }
                        }
                    }

                },
                short_name: {
                    required: true,
                    maxlength: 30,
                },
                phone_code: {
                    required: true,
                }

            },
            messages: {
                name: {
                    required: "Name field is required.",
                    maxlength: "Name field cannot exceed {0} characters.",
                    remote: "This Name is already registered.",
                },
                short_name: {
                    required: "Short Name field is required.",
                    maxlength: "Short Name field cannot exceed {0} characters.",

                },
                phone_code: {
                    required: "Phone Code field is required.",
                },

            },
            submitHandler: function(form) {
                var form_data = new FormData($('#storeForm')[0]);
                var action_url = "{{ route('country.update') }}";
                var csrf = "{{ csrf_token() }}";
                $.ajax({
                    url: action_url,
                    data: form_data,
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    processData: false,
                    contentType: false,
                    type: "POST",
                    dataType: 'json',
                    beforeSend: function() {
                        // $(".loader").fadeIn();
                        $('.loader').css("visibility", "visible");
                    },
                    success: function(data) {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: data.msg ?? 'Country saved successfully',
                                confirmButtonText: 'OK'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = "{{ route('country') }}";
                                }
                            });
                        }
                    },
                    error: function() {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong. Please try again.'
                        });
                    }
                });
            }
        });
    </script>
@endpush
@endsection