@extends('backend.layouts.app')

@section('content')
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Edit City</h4>
   </div>
   <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">
         <ol class="breadcrumb">

         <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
         <li class="breadcrumb-item "><a href="{{ route('country')}}">Country </a></li>

<li class="breadcrumb-item "><a href="{{ url()->previous() }}">State</a></li>
            <li class="breadcrumb-item "><a href="{{ url()->previous() }}">City</a></li>
                        <li class="breadcrumb-item active"> Edit City</li>
         </ol>
      </div>
   </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-primary">
                <form action="{{ route('city.update', $city->id) }}" method="post" id="form">
                    @csrf
                    @method('POST')
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="short_code">Short Code<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                    <input type="text" name="short_code" value="{{ old('short_code', $city->short_code) }}" class="form-control stop_first_space" pattern="^[a-zA-Z_ ]*$" placeholder="Enter Short Code" id="short_code" required>
                                    @if ($errors->has('short_code'))
                                        <p style="color:red;">{{ $errors->first('short_code') }}</p>
                                    @endif
                                </div>
                            </div>
                                <!-- Add the state dropdown here -->
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="state_id">State<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                        <select name="state_id" id="state_id" class="form-control" required>
                                            <option value="">Select State</option>
                                            @foreach($states as $state)
                                                <option value="{{ $state->id }}" {{ old('state_id', $city->state_id) == $state->id ? 'selected' : '' }}>
                                                    {{ $state->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('state_id'))
                                            <p style="color:red;">{{ $errors->first('state_id') }}</p>
                                        @endif
                                    </div>
                                </div>


                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="name">City Name<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                    <input type="text" name="name" value="{{ old('name', $city->name) }}" class="form-control stop_first_space" pattern="^[a-zA-Z_ ]*$" placeholder="Enter City Name" id="name" required>
                                    @if ($errors->has('name'))
                                        <p style="color:red;">{{ $errors->first('name') }}</p>
                                    @endif
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="latitude">Latitude<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                    <input type="text" name="latitude" value="{{ old('latitude', $city->latitude) }}" class="form-control stop_first_space" pattern="^[0-9]*[.,]?[0-9]*$" placeholder="Enter Latitude" id="latitude" required>
                                    @if ($errors->has('latitude'))
                                        <p style="color:red;">{{ $errors->first('latitude') }}</p>
                                    @endif
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="longitude">Longitude<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                    <input type="text" name="longitude" value="{{ old('longitude', $city->longitude) }}" class="form-control stop_first_space" pattern="^[0-9]*[.,]?[0-9]*$" placeholder="Enter Longitude" id="longitude" required>
                                    @if ($errors->has('longitude'))
                                        <p style="color:red;">{{ $errors->first('longitude') }}</p>
                                    @endif
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox mr-sm-2 m-b-15">
                                        <input type="checkbox" class="custom-control-input" name="status" id="checkbox0" value="1" {{ old('status', $city->status) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="checkbox0">Is Active</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <ul class="nav nav-tabs" id="languageTab" role="tablist">
                                    @foreach($languages as $index => $language)
                                        <li class="nav-item">
                                            <a class="nav-link {{ $index === 0 ? 'active' : '' }}" id="language-tab-{{ $language->id }}" data-toggle="tab" href="#language-content-{{ $language->id }}" role="tab" aria-controls="language-content-{{ $language->id }}" aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                                                {{ $language->name }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                                <div class="tab-content" id="languageTabContent" style="margin-top:1%">
                                    @foreach($languages as $index => $language)
                                        <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="language-content-{{ $language->id }}" role="tabpanel" aria-labelledby="language-tab-{{ $language->id }}">
                                            <div class="form-group">
                                                <label for="city_name_{{ $language->id }}">City Name in {{ $language->name }}<span style="color: red;font-size:18px;"><b>*</b></span></label>
                                                <input type="text" name="city_names[{{ $language->id }}]" class="form-control" value="{{ old('city_names.' . $language->id, $cityLangs[$language->id] ?? '') }}" placeholder="Enter City Name" required>
                                                @if ($errors->has('city_names.' . $language->id))
                                                    <p style="color:red;">{{ $errors->first('city_names.' . $language->id) }}</p>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" id="submitButton" class="btn btn-primary">Submit</button>
                        <a href="{{ url()->previous() }}" class="btn btn-secondary">Back</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@stop

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('form');
    const submitButton = document.getElementById('submitButton');
    const tabInputs = document.querySelectorAll('.tab-content input');

    // Track if there were changes made
    let isInputChanged = false;

    // Listen for input changes to set the flag
    tabInputs.forEach(input => {
        input.addEventListener('input', function() {
            isInputChanged = true;
        });
    });


    $(document).ready(function() {
        // Custom regex validation method
        $.validator.addMethod("regex", function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        }, "Please check your input.");

        // Custom decimal validation method
        $.validator.addMethod("decimal", function(value, element) {
            return this.optional(element) || /^-?\d+(\.\d+)?$/.test(value);
        }, "Please enter a valid decimal number.");

        // Custom range validation method
        $.validator.addMethod("range", function(value, element, range) {
            var val = parseFloat(value);
            return this.optional(element) || (val >= range[0] && val <= range[1]);
        }, "Please enter a value between {0} and {1}.");

        $("#form").validate({
            rules: {
                short_code: {
                    required: true,
                    maxlength: 5,
                    regex: /^[a-zA-Z_ ]*$/
                },
                state_id: {
                    required: true
                },
                name: {
                    required: true,
                    maxlength: 50,
                    regex: /^[a-zA-Z_ ]*$/
                },
                latitude: {
                    required: true,
                    decimal: true,
                    range: [-90, 90] // Custom range validation
                },
                longitude: {
                    required: true,
                    decimal: true,
                    range: [-180, 180] // Custom range validation
                },
                city_names: {
                    required: true
                }
            },
            messages: {
                short_code: {
                    required: "Please enter a short code.",
                    regex: "Short code can only contain letters, underscores, and spaces.",
                    maxlength: "Short code cannot exceed 5 characters."

                },
                state_id: {
                    required: "Please select a state."
                },
                name: {
                    required: "Please enter a city name.",
                    regex: "City name can only contain letters, underscores, and spaces.",
                    maxlength: "Name cannot exceed 50 characters."

                },
                latitude: {
                    required: "Please enter latitude.",
                    decimal: "Please enter a valid decimal number.",
                    range: "Latitude must be between -90 and 90."
                },
                longitude: {
                    required: "Please enter longitude.",
                    decimal: "Please enter a valid decimal number.",
                    range: "Longitude must be between -180 and 180."
                },
                city_names: {
                    required: "Please enter city names for all languages."
                }
            },
            errorClass: "error",
       highlight: function(element) {
             $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
            // .addClass('is-valid');
        },
        });

        // Prevent form submission if there are validation errors
        submitButton.addEventListener('click', function(event) {
            if ($("#form").valid()) {
                form.submit(); // Submit the form when the button is clicked
            } else {
                event.preventDefault(); // Prevent form submission if validation fails
            }
        });
    });

});
</script>
