@extends('admin.templates.layout')
@section('head')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .section-header { margin-top: 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; color: #495057; font-weight: 600; font-size: 1.1em; }
        .time-input-group { display: flex; align-items: center; gap: 10px; }
        .day-label { width: 40px; font-weight: 500;}
        .closed-label { color: #878a99; font-style: italic; }
    </style>
@endsection
@section('content')
<form id="vendorForm" autocomplete="off" class="needs-validation" novalidate enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="id" value="{{ $id }}" id="id">
    @if($id) <input type="hidden" name="user_id" value="{{ $user->id }}"> @endif
    
    <div class="row">
        <div class="col-lg-12"> <!-- Full width wrapper -->
            
            <!-- Account Credentials -->
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Account Credentials</h5></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Username <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="username" value="{{ $user->username ?? '' }}" required placeholder="Choose username...">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" name="email" value="{{ $user->email ?? '' }}" required placeholder="Business email">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Password @if(!$id)<span class="text-danger">*</span>@endif</label>
                            <input type="password" class="form-control" name="password" @if(!$id) required @endif placeholder="Create a password">
                            @if($id) <small class="text-muted">Leave blank to keep unchanged</small> @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Business Details -->
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Business Details</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Business Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="business_name" value="{{ $vendor->business_name ?? '' }}" required placeholder="Your business name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Category <span class="text-danger">*</span></label>
                        <select class="form-control select2" name="category_ids[]"  required>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" @if(in_array($cat->id, $selected_categories)) selected @endif>{{ $cat->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Business Description</label>
                        <textarea class="form-control" name="business_description" rows="3" placeholder="Describe your business...">{{ $vendor->business_description ?? '' }}</textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Business Logo</label>
                            <input type="file" class="form-control" name="logo" accept="image/*">
                            @if($vendor && $vendor->logo_url)
                                <div class="mt-2">
                                    <img src="{{ $vendor->logo_url }}" alt="Logo" width="100" class="img-thumbnail">
                                </div>
                            @endif
                            <small class="text-muted">Recommended: Square image (512x512px)</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Banner Image</label>
                            <input type="file" class="form-control" name="banner" accept="image/*">
                            @if($vendor && $vendor->banner_url)
                                <div class="mt-2">
                                    <img src="{{ $vendor->banner_url }}" alt="Banner" width="200" class="img-thumbnail">
                                </div>
                            @endif
                            <small class="text-muted">Recommended: Landscape image (1200x400px)</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Business Verification -->
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Business Verification</h5></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Business Type <span class="text-danger">*</span></label>
                            <select class="form-select" name="business_type_id" required>
                                <option value="">Select Business Type</option>
                                @foreach($businessTypes as $type)
                                    <option value="{{ $type->id }}" @if(($vendor->business_type_id ?? '') == $type->id) selected @endif>{{ $type->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <select class="form-control select2" name="country_id" id="country_id" required>
                                <option value="">Select Country</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->id }}" @if(($vendor->country_id ?? '') == $country->id) selected @endif>
                                        {{ $country->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3" id="company_reg_no_div" style="display:none;">
                            <label class="form-label">Company Registration Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="company_registration_number" value="{{ $vendor->company_registration_number ?? '' }}" placeholder="UK Company Reg No">
                        </div>
                        <div class="col-md-6 mb-3" id="tax_id_div" style="display:none;">
                            <label class="form-label">Tax ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="tax_id" value="{{ $vendor->tax_id ?? '' }}" placeholder="Tax Identification Number">
                        </div>
                        <div class="col-md-6 mb-3" style="display:none;">
                            <label class="form-label">VAT Number (Optional)</label>
                            <input type="text" class="form-control" name="vat_number" value="{{ $vendor->vat_number ?? '' }}" placeholder="e.g. GB123456789">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Person -->
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Contact Person</h5></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="contact_person_name" value="{{ $user->name ?? '' }}" required placeholder="Contact person...">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Role / Position</label>
                            <input type="text" class="form-control" name="contact_person_role" value="{{ $vendor->contact_person_role ?? '' }}" placeholder="e.g. Owner, Manager">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Location & Contact -->
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Location & Contact</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Business Address</label>
                        <input type="text" class="form-control" name="address" value="{{ $vendor->address ?? '' }}" placeholder="Full address">
                    </div>
                    <div class="row">
                        <div class="col-md-3 mb-3">
                             <label class="form-label">Dial Code</label>
                             <select class="form-control select2" name="dial_code">
                                <option value="">Select Code</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->dial_code }}" @if(($user->dial_code ?? '') == $country->dial_code) selected @endif>
                                        {{ $country->dial_code }} ({{ $country->name ?? $country->code }})
                                    </option>
                                @endforeach
                             </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Phone Number</label>
                            <input type="text" class="form-control" name="phone_number" value="{{ $user->phone ?? '' }}" placeholder="505000000" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        </div>
                        <div class="col-md-5 mb-3">
                            <label class="form-label">Website (Optional)</label>
                            <input type="url" class="form-control" name="website" value="{{ $vendor->website ?? '' }}" placeholder="https://yourbusiness.com">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Facebook URL (Optional)</label>
                            <input type="url" class="form-control" name="facebook_url" value="{{ $vendor->facebook_url ?? '' }}" placeholder="https://facebook.com/yourpage">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Instagram URL (Optional)</label>
                            <input type="url" class="form-control" name="instagram_url" value="{{ $vendor->instagram_url ?? '' }}" placeholder="https://instagram.com/yourpage">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">LinkedIn URL (Optional)</label>
                            <input type="url" class="form-control" name="linkedin_url" value="{{ $vendor->linkedin_url ?? '' }}" placeholder="https://linkedin.com/company/yourpage">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Opening Hours -->
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Opening Hours</h5></div>
                <div class="card-body">
                    <p class="text-muted mb-4">Set your regular operating hours. Toggle the switch to mark a day as closed.</p>
                    @foreach($days as $day)
                        @php
                            $oh = $opening_hours[$day] ?? null;
                            $isOpen = $oh ? !$oh['is_closed'] : true; // Default open
                            $start = $oh['start_time'] ?? '09:00';
                            $end = $oh['end_time'] ?? '17:00';
                        @endphp
                        <div class="row align-items-center mb-3">
                            <div class="col-auto">
                                <div class="form-check form-switch">
                                    <input class="form-check-input day-toggle" type="checkbox" role="switch" id="switch_{{$day}}" name="opening_hours[{{$day}}][is_open]" value="1" @if($isOpen) checked @endif>
                                    <label class="form-check-label day-label" for="switch_{{$day}}">{{ $day }}</label>
                                </div>
                            </div>
                            <div class="col">
                                <div class="time-input-group {{$day}}-times @if(!$isOpen) d-none @endif">
                                    <input type="time" class="form-control" name="opening_hours[{{$day}}][start_time]" value="{{ \Carbon\Carbon::parse($start)->format('H:i') }}">
                                    <span class="text-muted">to</span>
                                    <input type="time" class="form-control" name="opening_hours[{{$day}}][end_time]" value="{{ \Carbon\Carbon::parse($end)->format('H:i') }}">
                                </div>
                                <div class="{{$day}}-closed @if($isOpen) d-none @endif">
                                    <span class="closed-label">Closed</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Certificates & Compliance -->
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Certificates & Compliance</h5></div>
                <div class="card-body">
                    <h6 class="mb-3 fw-bold">Required Documents</h6>
                    <div class="row">
                         <!-- Universal -->
                         @foreach([
                             'pricing_service_catalogue' => 'Pricing / Service Catalogue',
                             'certificate_of_incorporation' => 'Certificate of Incorporation',
                             'proof_of_business_address' => 'Proof of Business Address',
                             'government_photo_id' => 'Government-issued Photo ID'
                         ] as $field => $label)
                             <div class="col-md-6 mb-3">
                                 <label class="form-label">{{ $label }} <span class="text-danger">*</span></label>
                                 <input type="file" class="form-control" name="{{ $field }}" 
                                        accept="application/pdf,image/jpeg,image/png,image/webp"
                                        @if(!$vendor || !$vendor->$field) required @endif
                                 >
                                 @if($vendor && $vendor->$field)
                                     <div class="mt-1">
                                         <a href="{{ get_uploaded_image_url($vendor->$field, 'vendor_docs_upload_dir') }}" target="_blank" class="text-primary"><i class="ri-file-download-line"></i> View Current File</a>
                                     </div>
                                 @endif
                             </div>
                         @endforeach

                         <!-- Conditional (Hidden by default) -->
                         @foreach([
                             'food_hygiene_certificate' => 'Food Hygiene & Safety Certificate',
                             'public_liability_insurance' => 'Public Liability Insurance',
                             'trade_license' => 'Trade-specific License',
                             'halal_certification' => 'Halal Certification'
                         ] as $field => $label)
                             @php
                                 $hasFile = $vendor && $vendor->$field ? 'true' : 'false';
                             @endphp
                             <div class="col-md-6 mb-3 extra-doc-field" style="display:none;">
                                 <label class="form-label">{{ $label }} <span class="text-danger">*</span></label>
                                 <input type="file" class="form-control conditional-file-input" name="{{ $field }}" 
                                        accept="application/pdf,image/jpeg,image/png,image/webp"
                                        data-has-file="{{ $hasFile }}"
                                 >
                                  @if($vendor && $vendor->$field)
                                     <div class="mt-1">
                                         <a href="{{ get_uploaded_image_url($vendor->$field, 'vendor_docs_upload_dir') }}" target="_blank" class="text-primary"><i class="ri-file-download-line"></i> View Current File</a>
                                     </div>
                                 @endif
                             </div>
                         @endforeach
                    </div>

                    <div class="mb-3 border-top pt-3 mt-2 d-none">
                        <label class="form-label">Food Hygiene Rating</label>
                        <select class="form-select" name="food_hygiene_rating_id">
                            <option value="">Select rating (if applicable)</option>
                            @foreach($foodHygieneRatings as $rating)
                                <option value="{{ $rating->id }}" @if(($vendor->food_hygiene_rating_id ?? '') == $rating->id) selected @endif>
                                    {{ $rating->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Additional Documents Section Removed --}}
                </div>
            </div>
            
            <div class="d-flex justify-content-end gap-2 mb-4">
                 <button type="button" class="btn btn-dark w-sm" onclick="history.back()">Back</button>
                 <button type="submit" class="btn btn-primary w-sm" id="submitButton">Submit Application</button>
            </div>

        </div>
    </div>
</form>
@stop

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    jQuery(document).ready(function () {
        $('.select2').select2({ placeholder: "Select category", allowClear: true });

        // Toggle logic for opening hours
        $('.day-toggle').change(function() {
            let day = $(this).attr('id').split('_')[1];
            if($(this).is(':checked')) {
                $('.' + day + '-times').removeClass('d-none');
                $('.' + day + '-closed').addClass('d-none');
            } else {
                $('.' + day + '-times').addClass('d-none');
                $('.' + day + '-closed').removeClass('d-none');
            }
        });

        // ---------------------------------------------------------
        // Conditional Logic for Country (Reg No vs Tax ID)
        // ---------------------------------------------------------
        function toggleCountryFields() {
            let countryId = $('#country_id').val();
            if (countryId == '230') { // 230 is UK
                $('#company_reg_no_div').show();
                $('#tax_id_div').hide();
                $('[name="company_registration_number"]').prop('required', true);
                $('[name="tax_id"]').prop('required', false);
            } else if (countryId) { // Any other country selected
                $('#company_reg_no_div').hide();
                $('#tax_id_div').show();
                $('[name="company_registration_number"]').prop('required', false);
                $('[name="tax_id"]').prop('required', true);
            } else { // No country selected
                $('#company_reg_no_div').hide();
                $('#tax_id_div').hide();
                $('[name="company_registration_number"]').prop('required', false);
                $('[name="tax_id"]').prop('required', false);
            }
        }

        $('#country_id').change(toggleCountryFields);
        toggleCountryFields(); // Run on load

        // ---------------------------------------------------------
        // Conditional Logic for Category (Extra Docs)
        // ---------------------------------------------------------
        function toggleExtraDocs() {
            let selectedCategories = $('select[name="category_ids[]"]').val();
            let showExtra = false;
            
            if (selectedCategories && selectedCategories.length > 0) {
                // Requirement: check first category if it matches 4, 5, 6, 11
                let firstCat = selectedCategories[0];
                let targetCats = ['4', '5', '6', '11']; // Strings as value is string
                if (targetCats.includes(firstCat.toString())) {
                    showExtra = true;
                }
            }

            if (showExtra) {
                $('.extra-doc-field').show();
                // Enable required if file not present
                $('.conditional-file-input').each(function() {
                    let hasFile = $(this).data('has-file');
                    // If hasFile is false (or "false" string), make it required
                    if (hasFile === false || hasFile === 'false') {
                        $(this).prop('required', true);
                    } else {
                         $(this).prop('required', false);
                    }
                });
            } else {
                $('.extra-doc-field').hide();
                $('.conditional-file-input').prop('required', false);
            }
        }

        $('select[name="category_ids[]"]').change(toggleExtraDocs);
        toggleExtraDocs(); // Run on load

        // Dynamic Documents
        let docIndex = {{ count($documents ?? []) }};
        $('#add-document').click(function() {
            let row = `
                <div class="row align-items-end mb-3 document-row">
                    <div class="col-md-5">
                        <label class="form-label">Document Title</label>
                        <input type="text" class="form-control" name="documents[`+docIndex+`][title]" placeholder="e.g. HALAL Certificate" required>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">File</label>
                        <input type="file" class="form-control" name="documents[`+docIndex+`][file]" required>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger remove-document"><i class="ri-delete-bin-fill"></i></button>
                    </div>
                </div>
            `;
            $('#documents-container').append(row);
            docIndex++;
        });

        $(document).on('click', '.remove-document', function() {
            $(this).closest('.document-row').remove();
        });

        $("#vendorForm").validate({
            rules: {
                username: { required: true },
                email: { required: true, email: true },
                business_name: { required: true },
                "category_ids[]": { required: true },
                business_type_id: { required: true },
                contact_person_name: { required: true }
            },
            messages: {
                username: "Username is required",
                business_name: "Business Name is required"
            },
            errorPlacement: function (error, element) { error.appendTo(element.parent()); },
            submitHandler: function (form) {
                let formData = new FormData(form);
                $.ajax({
                    url: "{{ route('admin.vendors.store') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function (xhr) { xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')); },
                    success: function (response) {
                        if (response.status == "success") {
                            Swal.fire({ text: response.message, iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/tick.svg" class="img-fluid">', confirmButtonText: "OK" }).then((result) => { if (result.isConfirmed) { window.location.href = "{{ route('admin.vendors') }}"; } });
                        } else {
                            Swal.fire({ text: response.message, iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/close.svg" class="img-fluid">', icon: "error" });
                        }
                    },
                    error: function (xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function (key, errorMessages) {
                                // Simple error placement, might need refinement for complex fields
                                let name = key;
                                if(key.includes('.')) name = key.split('.')[0]; 
                                $("[name='"+name+"']").after('<label class="error">' + errorMessages[0] + '</label>');
                            });
                             Swal.fire({ text: 'Validation error. Please check fields.', icon: "error" });
                        } else {
                            Swal.fire({ text: 'Something went wrong. Please try later.', icon: "error" });
                        }
                    }
                });
                return false;
            }
        });
    });
</script>
@stop