@extends('layout', ['page' => 'dashboard'])
@section('title', 'Franchisee registration - ' . config('app.name'))

@section('content')
    @php
        $breadcrumb = [
            'title' => 'Franchisee Registration Form ',
            'links' => [
                ['label' => 'Home', 'url' => route('home')],
                ['label' => 'Registration Form']
            ]
        ];
    @endphp
    @include('partials._breadcrumb-title', ['breadcrumb' => $breadcrumb])

    <section class="wrap">
        <div class="container">
            <div class="row">
                <div class="box-shadow">
                    <div class="col-lg-12 col-md-12">
                        <div class="candidates-resume-content">
                            <form
                                action="{{ route('user.franchisee_registration') }}"
                                method="post"
                                class="resume-info m-4"
                                name="collaboration_enquiry_form"
                                id="collaboration_enquiry_form"
                                enctype="multipart/form-data" 
                            >
                             @csrf
                                <h3>Franchisee Registration Form</h3>
                                @if(!empty($franchisee))
                                <p><small class="blink_me text-success">Your franchisee application is in processing and has not been verified by the admin yet.</small></p>
                                @endif
                                <p><small>Please fill out the following fields.</small></p>
                                <br>
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Name Of Study Center</label>
                                            <input type="text"  class="form-control boxss" autocomplete="off" id="name" name="name" placeholder="Center Name" value="{{ old('name', $franchisee->name ?? $user->name) }}" required>
                                            @error('name')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="mobile">Contact No. </label>
                                            <input class="form-control boxss charector" autocomplete="off"  type="number" name="mobile" id="mobile" placeholder="Contact No. " value="{{ old('mobile', $franchisee->mobile ?? $user->mobile) }}" required>
                                            @error('mobile')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2"style="margin-top: 10px;">
                                        <div class="form-group">
                                            <label for="email">Email ID </label>
                                            <input autocomplete="off" class="form-control boxss"type="email" name="email" id="email" placeholder="Email" value="{{ old('email', $franchisee->email ?? $user->email) }}" required>
                                            @error('email')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <hr/>

                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="state">State</label>
                                            <select class="form-control boxss select2_single" id="state-dropdown" name="state" required>
                                                <option value="">-- Select State --</option>
                                                @foreach ($states as $state)
                                                <option value="{{$state->id}}" @if(!empty($franchisee) && $franchisee->state == $state->id) selected @endif>
                                                    {{$state->name}}
                                                </option>
                                                @endforeach
                                            </select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('state')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="city">City</label>
                                            <select class="form-control boxss select2_single" name="city" id="city-dropdown" required></select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('city')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="pincode">Pincode</label>
                                            <input class="form-control boxss number_only" autocomplete="off" type="number" name="pincode" id="pincode" placeholder="pincode" value="{{ old('pincode', $franchisee->pincode ?? '') }}" required>
                                            @error('pincode')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="address">Address</label>
                                            <textarea class="form-control boxss rules" name="address" id="address" required>{{ old('address', $franchisee->address ?? '') }}</textarea>
                                            @error('address')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <hr>

                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="director_name">Center Head / Director's Name</label>
                                            <input type="text" name="director_name" id="director_name" placeholder="Director's Name" value="{{ old('director_name', $franchisee->director_name ?? $user?->name ) }}" required autocomplete="off" class="form-control boxss">
                                            @error('director_name')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                     <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="established_date">Establishment year of study center, since </label>
                                            <input class="form-control boxss charector" autocomplete="off" type="date" name="established_date" id="established_date" placeholder="estabished date" value="{{ old('established_date', $franchisee?->established_date->format('Y-m-d') ?? '') }}" required>
                                            @error('established_date')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="photo">Photo</label>
                                            <input type="file" name="photo" id="photo" placeholder="photo" value="{{ old('photo', $franchisee?->photo ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg" @if(!$franchisee?->photo) required @endif>

                                            @if($franchisee?->photo)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $franchisee->photo) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $franchisee->photo) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('photo')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="banner_photo">Banner Photo</label>
                                            <input type="file" class="form-control boxss" accept=".jpg,.png,.jpeg"  name="banner_photo" id="banner_photo" placeholder="banner_photo" value="{{ old('banner_photo', $franchisee?->banner_photo ?? '') }}" @if(!$franchisee?->banner_photo) required @endif>

                                            @if($franchisee?->banner_photo)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $franchisee->banner_photo) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $franchisee->banner_photo) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('banner_photo')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="document_type">Document Type</label>
                                            <select class="form-control boxss select2_single" name="document_type" id="document_type" required>
                                                <option value="">Select Document Type</option>
                                                <option value="aadhar" 
                                                    @if((old('document_type') == 'aadhar') || (!is_null($franchisee) && $franchisee->documents['type'] == 'aadhar')) 
                                                        selected 
                                                    @endif>
                                                    Aadhar Card
                                                </option>
                                                <option value="pancard" 
                                                    @if((old('document_type') == 'pancard') || (!is_null($franchisee) && $franchisee->documents['type'] == 'pancard')) 
                                                        selected 
                                                    @endif>
                                                    Pan Card
                                                </option>
                                            </select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('document_type')
                                                <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2" id="upload_document">
                                        <div class="form-group">
                                             <label for="documents">Upload Documents</label>
                                            <input type="file" class="form-control boxss"name="documents[]" id="documents" multiple placeholder="Upload Document" accept=".jpg,.png,.jpeg">
                                           @if(!empty($franchisee?->documents) && !empty($franchisee->documents['files']))
                                                <div class="mt-2 d-flex">
                                                    @foreach($franchisee->documents['files'] as $file)
                                                        <a href="{{ asset('storage/' . $file) }}" target="_blank" class="d-block text-primary">
                                                            <img src="{{ asset('storage/' . $file) }}" alt="Document" style="width: 30px; height: 30px; object-fit: cover; margin-right: 5px; border: 1px solid #ccc;">
                                                        </a>
                                                    @endforeach
                                                </div>
                                            @endif

                                            @error('documents.*')
                                            <span class="text-danger mt-2">{{ $message }}</span><br>
                                            @enderror
                                            <small class="text-muted">Only PDF and image files are allowed.</small>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 my-3">
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input class="form-check-input" name="agree" type="checkbox" value="ON" id="flexCheckDefault" required>
                                                <label class="form-check-label" for="flexCheckDefault" style="font-size: 14px; text-align:justify;">
                                                     *I agree all statements in Terms of service
                                                </label>
                                            </div>
                                            @error('agree')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <hr>

                                <div class="col-lg-12 d-flex justify-content-end">
                                    <button type="submit" class="default-btn">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
<script>
    $(document).ready(function () {
        function loadCities(idState, selectedCity = '') {
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{ url('api/fetch-cities') }}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city-dropdown").append('<option value="' + value.id + '"' + (value.id == selectedCity ? ' selected' : '') + '>' + value.name + '</option>');
                    });
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    // Handle error here
                }
            });
        }

        // Trigger city loading on state change
        $('#state-dropdown').on('change', function () {
            let idState = this.value;
            loadCities(idState);
        });

        // if a state is already selected
        @if(!empty($franchisee) && $franchisee->state)
        loadCities("{{ $franchisee->state }}", "{{ $franchisee->city ?? '' }}");
        @endif
    });
</script>
@endpush