@section('title','Edit Address')
@include('layout.header')
@include('layout.sidebar')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
    .error{
        color: red;
    }
    .input-group-append {
        position: relative;
    }
    .input-group-append .input-group-text-start {
        position: absolute;    right: 10px;
        top: 11px;
    }
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Edit Address</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Edit Address</li>
        </ul>
    </div>

</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                    <form action="{{ route('edit-address',[$address->id])}}" method="POST" id="address_form">
                    @method('PUT')
                        @csrf
                            <div class="mt-5">
                                <div class="row mt-6">
                                    <div class="col-md-6 mt-3">
                                        <label  for="address_type" class="form-label">Address Type <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" value="{{ old('address_type',$address->address_type)}}" name="address_type" data-control="select2" data-placeholder="Select Address Type">
                                                <option value=""> Select Address Type </option>
                                                @foreach(App\Models\AddressModal::ADDRESSTYPE as $key => $label)
                                                    <option value='{{$key}}' {{ old('address_type', $address->address_type) ==  $key ? 'selected' : ''}}>{{$label}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="addressTitle" class="form-label">Address Title<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="address_title" value="{{ old('address_title',$address->address_title)}}" name="address_title" placeholder="Address Title" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="latitude" class="form-label">Latitude<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="latitude" value="{{ old('latitude',$address->latitude)}}" name="latitude" placeholder="Latitude" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="longitude" class="form-label">Longitude<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="longitude" value="{{ old('longitude',$address->longitude)}}" name="longitude" placeholder="Longitude" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-12 mt-3">
                                        <label  for="addressLine1" class="form-label">Address Line 1 <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <textarea class="form-control" id="address_line_1" name="address_line_1" rows="3" placeholder="Address Line 1">{{ old('address_line_1', $address->address_line_1) }}</textarea>
                                        </div>
                                    </div>

                                    <div class="col-md-12 mt-3">
                                        <label  for="addressLine2" class="form-label">Address Line 2 <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <textarea class="form-control" id="address_line_2" name="address_line_2" rows="3" placeholder="Address Line 2">{{ old('address_line_2', $address->address_line_2) }}</textarea>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="country" class="form-label">Country <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" name="country" id="country_id" value="{{ old('country',$address->country)}}" data-control="select2" data-placeholder="Select Country" onchange="get_state()">
                                                <option value=""> Select Country </option>
                                                @foreach(@$country as $country)
                                                    <option value="{{$country->id}}" {{ old('country', $address->country) ==  $country->id ? 'selected' : ''}}> {{ $country->name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="state" class="form-label">State <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="hidden" id="selected_state_id" value="{{ old('state', $address->state) }}">
                                            <select class="form-select" name="state" id="state_id" data-control="select2" data-placeholder="Select State" onchange="get_city()">
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="city" class="form-label">City <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="hidden" id="selected_city_id" value="{{ old('city', $address->city) }}">
                                            <select class="form-select" name="city" id="city_id" data-control="select2" data-placeholder="Select City">
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="pincode" class="form-label">Pincode<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="pincode" name="pincode" value="{{ old('pincode',$address->pincode)}}" placeholder="Pincode" autocomplete="off" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57" maxlength="6">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="contactNumber1" class="form-label">Contact Number 1<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="contact_number_1" name="contact_number_1" value="{{ old('contact_number_1',$address->contact_number_1)}}" placeholder="Contact Number 1" autocomplete="off" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57" maxlength="10">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="contactNumber2" class="form-label">Contact Number 2<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="contact_number_2" name="contact_number_2" value="{{ old('contact_number_2',$address->contact_number_2)}}" placeholder="Contact Number 2" autocomplete="off" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57" maxlength="10">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="email" class="form-label">Email<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="email"  class="form-control " id="email" name="email" value="{{ old('email',$address->email)}}" placeholder="Email" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="status" class="form-label">Status <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" name="status" data-control="select2" data-placeholder="Select Status">
                                                <option value=""> Select Status </option>
                                                <option value="Active" {{ old('status', $address->status) == "Active" ? 'selected' : ''}}> Active </option>
                                                <option value="In-Active" {{ old('status', $address->status) == "In-Active" ? 'selected' : ''}}> InActive </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group mb-5 col-md-2">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                    <div class="form-group mb-5 col-md-2">
                                        <a  href="{{ url('/Address')}}"  class="form-control btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                    </form>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')
<script>
    $(document).ready(function() {
        get_state();
        get_city();
    })
    $("#address_form").validate({
        debug: true,
        rules: {
            address_type:{required: true},
            latitude:{required: true},
            longitude:{required: true},
            address_title:{required: true},
            address_line_1:{required: true},
            address_line_2:{required: true},
            country:{required: true},
            state:{required: true},
            city:{required: true},
            pincode:{required: true},
            contact_number_1:{required: true},
            contact_number_2:{required: true},
            email:{required: true},
            status:{required: true},
        },
        messages: {

                address_type: {
                    required: 'Address type is Required.',
                },

                latitude: {
                    required: 'Latitude is Required.',
                },

                longitude: {
                    required: 'Longitude is Required.',
                },

                address_title: {
                    required: 'Address Title is Required.',
                },

                address_line_1: {
                    required: 'Address line 1 is Required.',
                },

                address_line_2: {
                    required: 'Address line 2 is Required.',
                },

                country: {
                    required: 'Country is Required.',
                },

                state: {
                    required: 'State is Required.',
                },

                city: {
                    required: 'City is Required.',
                },

                pincode: {
                    required: 'Pincode is Required.',
                },

                contact_number_1: {
                    required: 'Contact number 1 is Required.',
                },

                contact_number_2: {
                    required: 'Contact number 2 is Required.',
                },

                email: {
                    required: 'Email is Required.',
                },

                status: {
                    required: 'Status is Required.',
                },
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        },
        submitHandler: function(form) {
            $(".submit").attr("disabled", true);
            form.submit();
        }
    });

    function get_state() {
        var countryId = $("#country_id").val();
        var selectedStateId = $("#selected_state_id").val();
        $.ajax({
            type: "GET",
            url: "{{ route('get-state')}}",
            data: {
                countryId: countryId
            },
            success: function(data) {
                $('#state_id').empty();
                $('#city_id').empty();
                $('#state_id').append('<option value="" disabled selected>Select State</option>')
                $.each(data, function(key, value) {
                    var selected = (value.id == selectedStateId) ? 'selected' : '';
                    $('#state_id').append('<option value="' + value.id + '" ' + selected + '>' + value.name + '</option>');
                });
            }
        });
    }

    function get_city() {
        var stateId = $("#state_id").val();
        if(stateId == null){
            stateId = $("#selected_state_id").val();
        }
        var selectedCityId = $("#selected_city_id").val();
        $.ajax({
            type: "GET",
            url: "{{ route('get-city')}}",
            data: {
                stateId: stateId
            },
            success: function(data) {
                $('#city_id').empty();
                $('#city_id').append('<option value="" disabled selected>Select City</option>')
                $.each(data, function(key, value) {
                    var selected = (value.id == selectedCityId) ? 'selected' : '';
                    $('#city_id').append('<option value="' + value.id + '" ' + selected + '>' + value.name + '</option>');
                });
            }
        });
    }
</script>