@extends("admin.layout.master")
@section("title","Dashboard")
@section ("content")
<div class="d-flex flex-column flex-column-fluid">
    <div class="app-toolbar py-3 py-lg-6" id="kt_app_toolbar">
        <div class="app-container container-xxl d-flex flex-stack" id="kt_app_toolbar_container">
            <div class="d-flex flex-column flex-wrap justify-content-center me-3 page-title">
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li><a class="text-muted text-hover-primary" href="{{url('/')}}">Dashboard</a></li>
                    <li> </li>
                    <li><a class="text-muted text-hover-primary" href="{{route('judge-list')}}">Judge Manager</a></li>
                    <li> </li>
                    <li>Edit</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="app-container container-xxl" id="kt_app_content_container">
        <div class="card mb-5 mb-xl-8">
            <div class="card-header mb-4">
                <h3>Judge Manager</h3>
            </div>

            <div class="card-body pt-0">
                <form action="{{route('judge-update', $data->id)}}" enctype="multipart/form-data" id="updateForm"
                    method="post">
                    <div class="row">@csrf <div class="col-md-12 fv-row mb-5">
                            <label class="required form-label">Name</label>
                            <input type="text" name="name" class="form-control stop_first_space" value="{{$data->name}}"
                                placeholder="Name Name" data-error="#name_error" />
                            <span class="error" id="name_error"></span>
                            @if($errors->has("name"))
                            <span class="text-danger">{{$errors->first("name")}}</span>
                            @endif
                        </div>
                        
                        <div class="col-md-12 fv-row mb-5"><label class=" form-label">Club</label>
                            <select class="form-select mb-2" name="club_id" id="club_id" data-control="select2"
                                    data-hide-search="true" data-placeholder="Select State" data-error="#club_id_error">
                                    <option value=""></option>
                                    @forelse($clubs as $cs)
                                        <option value="{{ $cs->id }}"
                                            @if ($data->club_id == $cs->id) selected @endif>{{ $cs->name }}</option>
                                    @empty
                                        <option value="">No state found</option>
                                    @endforelse
                                </select>
                            <span class="error" id="club_id_error"></span>
                            @if($errors->has("club_id"))
                            <span class="text-danger">{{$errors->first("club_id")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5"><label class="required form-label">Dob</label>
                            <input type="date" name="dob" class="form-control stop_first_space" value="{{$data->dob}}"
                                placeholder="Dob" data-error="#dob_error" />
                            <span class="error" id="dob_error"></span>
                            @if($errors->has("dob"))
                            <span class="text-danger">{{$errors->first("dob")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5"><label class="required form-label">Gender</label>
                            <span class="error" id="gender_error"></span>
                            @if($errors->has("gender"))
                            <span class="text-danger">{{$errors->first("gender")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required form-label">Phone</label>
                            <input type="text" name="contact_number" class="form-control stop_first_space"
                                value="{{$data->contact_number}}" placeholder="Phone Name"
                                data-error="#contact_number_error" />
                            <span class="error" id="contact_number_error"></span>
                            @if($errors->has("contact_number"))
                            <span class="text-danger">{{$errors->first("contact_number")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class="required form-label">Email</label>
                            <input type="text" name="email" class="form-control stop_first_space"
                                value="{{$data->email}}" placeholder="Email Name" data-error="#email_error" />
                            <span class="error" id="email_error"></span>
                            @if($errors->has("email"))
                            <span class="text-danger">{{$errors->first("email")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5"><label class="required form-label">State</label>
                        <select class="form-select mb-2" name="state_id" id="state_id" data-control="select2"
                                    data-hide-search="true" data-placeholder="Select State" data-error="#state_id_error">
                                    <option value=""></option>
                                    @forelse($state as $cs)
                                        <option value="{{ $cs->id }}"
                                            @if ($data->state_id == $cs->id) selected @endif>{{ $cs->name }}</option>
                                    @empty
                                        <option value="">No state found</option>
                                    @endforelse
                                </select>
                            <span class="error" id="state_id_error"></span>
                            @if($errors->has("state_id"))
                            <span class="text-danger">{{$errors->first("state_id")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5"><label class="required form-label">District</label>
                            <select name="district_id" id="district_id" class="form-control" data-error="#district_id_error">
                                <option value="">Select option</option>
                            </select>
                            <span class="error" id="district_id_error"></span>
                            @if($errors->has("district_id"))
                            <span class="text-danger">{{$errors->first("district_id")}}</span>
                            @endif
                        </div>
                        <div class="col-md-12 fv-row mb-5">
                            <label class=" form-label">Address</label>
                            <input value="{{old("address")}}" type="text" name="address"
                                class="form-control stop_first_space" placeholder="Address"
                                data-error="#address_error" />
                            <span class="error" id="address_error"></span>
                            @if($errors->has("address"))
                            <span class="text-danger">{{$errors->first("address")}}</span>
                            @endif
                        </div>
                    </div>

                    <div class="d-flex justify-content-end"> <button type="submit" id="kt_modal_new_address_submit"
                            class="btn btn-primary me-3">
                            <span class="indicator-label">Submit</span>
                        </button><a class="btn btn-light" href="{{route('judge-list')}}">Back</a></div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push("js")
<script>
$(document).ready(function() {
    $("#updateForm").validate({
        errorPlacement: function(error, element) {
            var placement = $(element).data("error");
            if (placement) {
                $(placement).append(error)
            } else {
                error.insertAfter(element);
            }
        },
        rules: {
            name: {
                required: true,
            },
            state_id: {
                required: true,
            },
            district_id: {
                required: true,
            },
            dob: {
                required: true,
            },
            gender: {
                required: true,
            },
            contact_number: {
                required: true,
            },
            email: {
                required: true,
            },
        },
        messages: {
            name: {
                required: "Name field is required."
            },
            state_id: {
                required: "State field is required."
            },
            district_id: {
                required: "District field is required."
            },
            dob: {
                required: "Dob field is required."
            },
            gender: {
                required: "Gender field is required."
            },
            contact_number: {
                required: "Phone field is required."
            },
            email: {
                required: "Email field is required."
            },
        },
        submitHandler: function(form) {
            form.submit();
        }
    });

    var selectedState = $("#state_id").val();

            // Trigger change event to load districts initially
            if (selectedState) {
                loadDistricts(selectedState);
            }

            // Bind change event handler to the state dropdown
            $("#state_id").change(function() {
                var selectedState = $(this).val();
                loadDistricts(selectedState);
            });

            // Function to load districts based on the selected state
            function loadDistricts(selectedState) {
                var district_id = $("#district_id");
                district_id.empty();

                if (selectedState) {
                    district_id.prop("disabled", false);
                    // Fetch districts based on the selected state using AJAX with POST method
                    $.ajax({
                        url: "{{ route('getdistrictsofclub') }}",
                        type: 'POST',
                        data: {
                            stateid: selectedState
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        dataType: 'json', // Ensure response is parsed as JSON
                        success: function(response) {
                            $.each(response, function(index, district) {
                                // Check if the district is selected by default
                                var selected = (district.id == "{{ $data->district_id }}") ? "selected" : "";
                                district_id.append("<option value='" + district.id + "' " + selected + ">" + district.name + "</option>");
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error("An error occurred while fetching the districts: ", error);
                            console.log("Response: ", xhr.responseText); // Log the full response text
                        }
                    });
                } else {
                    // Disable the district dropdown if no state is selected
                    district_id.prop("disabled", true);
                }
            }
});
</script>
@endpush