@extends('admin.layout.master')
@section('title', 'Dashboard')
@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <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">
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ url('/') }}" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('judge-list') }}" class="text-muted text-hover-primary">Judge Manager</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Create</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="kt_app_content_container" class="app-container container-xxl">
            <div class="card mb-5 mb-xl-8">
                <div class="card-header mb-4">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3">Judge Manager</span>
                    </h3>
                </div>
                <div class="card-body pt-0">
                    <form enctype="multipart/form-data" action="{{ route('judge-save') }}" method="post" id="createForm">
                        <div class="row">
                            @csrf
                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Name</label>
                                <input value="{{ old('name') }}" type="text" name="name"
                                    class="form-control stop_first_space" placeholder="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="clubid" id="clubid" data-control="select2"
                                    data-hide-search="true" data-placeholder="Select Club" data-error="#category_id_error">
                                    <option value="">Select</option>
                                    @forelse($clubs as $club)
                                        <option value="{{ $club->id }}">{{ $club->name }}</option>
                                    @empty
                                        <option value="">No state found</option>
                                    @endforelse
                                </select>
                                <span class="error" id="clubid_error"></span>
                                @if ($errors->has('clubid'))
                                    <span class="text-danger">{{ $errors->first('clubid') }}</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" 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>
                               
                                <div class="form-inline">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="male" name="gender" value="M">
                                        <label class="form-check-label" for="M">Male</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="female" name="gender" value="F" checked>
                                        <label class="form-check-label" for="F">Female</label>
                                    </div>
                                </div>
                                <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 value="{{ old('contact_number') }}" type="text" name="contact_number"
                                    class="form-control stop_first_space" placeholder="Phone"
                                    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 value="{{ old('email') }}" type="text" name="email"
                                    class="form-control stop_first_space" placeholder="Email" 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="#category_id_error">
                                    <option value=""></option>
                                    @forelse($state as $cs)
                                        <option value="{{ $cs->id }}">{{ $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 href="{{ route('judge-list') }}" class="btn btn-light">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            $("#createForm").validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                        var selectId = "#" + error.attr("id");
                        text = selectId.replace("-error", "_error"); // Remove the "-error" string
                        $(text).html(error)
                    }
                },
                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();
                }
            });

            $("#state_id").change(function() {
                var selectedState = $(this).val();
                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')
                        },
                        success: function(data) {
                            
                            $.each(data, function(index, data) {
                                
                                district_id.append("<option value='" + data
                                    .id + "'>" + data.name +
                                    "</option>");
                            });
                        }
                    });
                } else {
                    // Disable the district dropdown if no state is selected
                    district_id.prop("disabled", true);
                }
            });
        });
    </script>
@endpush