@extends('business.layouts.app')
@section('content')
<main class="main-content" x-data="businessProfileForm(@js(Auth::user()->business), @js($subcategoryIds), @js($serviceIds))" x-cloak>
    <div class="glass-nav d-flex justify-content-between align-items-center">
        <div>
            <button class="btn btn-white shadow-sm border d-lg-none me-2" @click="sidebarOpen = true">
                <i class="bi bi-list"></i>
            </button>
            <h4 class="fw-800 mb-0">Business Website</h4>
        </div>
    </div>

    <div class="row d-flex justify-content-start align-items-start ">
        <div class="form-container">
            <form @submit.prevent="submitForm">
                
                <div class="mb-4">
                    <label class="form-label required">Company Name</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-building"></i></span>
                        <input type="text" class="form-control" x-model="formData.company_name" :class="errors.company_name ? 'is-invalid' : ''">
                        <template x-if="errors.company_name">
                            <div class="invalid-feedback" x-text="errors.company_name[0]"></div>
                        </template>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label required">Mobile Number</label>
                        <input type="tel" class="form-control" x-model="formData.mobile_number" :class="errors.mobile_number ? 'is-invalid' : ''">
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Email Address</label>
                        <input type="email" class="form-control" x-model="formData.email" :class="errors.email ? 'is-invalid' : ''">
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Password</label>
                        <input type="text" class="form-control" x-model="formData.password" :class="errors.password ? 'is-invalid' : ''">
                    </div>
                </div>

                <div class="text-center mb-4">
                    <img :src="imagePreview || 'https://via.placeholder.com/120'" class="image-preview mb-2">
                    <div>
                        <input type="file" id="logoInput" class="d-none" @change="handleImageUpload" accept="image/*">
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="document.getElementById('logoInput').click()">
                            Change Logo
                        </button>
                    </div>
                </div>

                <div class="mb-4">
                    <label class="form-label required">About your Company</label>
                    <div x-ref="aboutEditor" style="height: 150px;"></div>
                </div>

                <div class="mb-4">
                    <label class="form-label required">Why Us</label>
                    <div x-ref="whyUsEditor" style="height: 150px;"></div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label required">State</label>
                        <select class="form-select" x-model="formData.state_id" @change="fetchDistricts()">
                            <option value="">Select State</option>
                            <template x-for="state in states" :key="state.id">
                                <option :value="state.id" x-text="state.name" :selected="state.id == formData.state_id"></option>
                            </template>
                        </select>
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label required">District</label>
                        <select class="form-select" x-model="formData.district_id">
                            <option value="">Select District</option>
                            <template x-for="district in districts" :key="district.id">
                                <option :value="district.id" x-text="district.name" :selected="district.id == formData.district_id"></option>
                            </template>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label required">Category</label>
                        <select class="form-select" x-model="formData.vendor_category_id" @change="fetchVendorSubcategories(); fetchVendorServices();">
                            <option value="">Select Category</option>
                            <template x-for="state in vendorCategories" :key="state.id">
                                <option :value="state.id" x-text="state.name" :selected="state.id == formData.vendor_category_id"></option>
                            </template>
                        </select>
                    </div>
                    <div class="col-md-12 mb-4">
                        <label class="form-label required">Subcategories (Multi-select)</label>
                        <div wire:ignore> <select 
                                x-ref="subcatSelect" 
                                multiple 
                                placeholder="Select subcategories..." 
                                autocomplete="off">
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 mb-4">
                        <label class="form-label required">Services (Multi-select)</label>
                        <div wire:ignore> <select 
                                x-ref="servSelect" 
                                multiple 
                                placeholder="Select services..." 
                                autocomplete="off">
                            </select>
                        </div>
                    </div>
                </div>

                <div class="card mb-4 bg-light border-0">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="fw-bold">Business Location</label>
                            <button type="button" class="btn btn-sm btn-primary" @click="fetchLocation()">
                                <i class="bi bi-geo-alt"></i> Fetch
                            </button>
                        </div>
                        <div class="row">
                            <div class="col">
                                <input type="text" class="form-control" placeholder="Latitude" x-model="formData.latitude" readonly>
                            </div>
                            <div class="col">
                                <input type="text" class="form-control" placeholder="Longitude" x-model="formData.longitude" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label required">WhatsApp Number</label>
                        <input type="tel" class="form-control" x-model="formData.whatsapp_number" :class="errors.whatsapp_number ? 'is-invalid' : ''">
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Call Number</label>
                        <input type="tel" class="form-control" x-model="formData.call_number" :class="errors.call_number ? 'is-invalid' : ''">
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">GSTIN</label>
                        <input type="text" class="form-control" x-model="formData.gstin" :class="errors.gstin ? 'is-invalid' : ''">
                    </div>
                    <div class="col-md-12 mb-4">
                        <label class="form-label">Address</label>
                        <textarea x-model="formData.address" cols="30" rows="2" class="form-control" :class="errors.address ? 'is-invalid' : ''"></textarea>
                    </div>
                </div>

                <hr>
                <h5 class="mb-3">Social Media Links</h5>
                
                <div class="mb-3">
                    <div class="input-group">
                        <span class="input-group-text bg-primary text-white"><i class="bi bi-google"></i></span>
                        <input type="text" class="form-control" placeholder="Google Business Profile" x-model="formData.social_google_business">
                    </div>
                </div>
                <div class="mb-3">
                    <div class="input-group">
                        <span class="input-group-text bg-primary text-white"><i class="bi bi-facebook"></i></span>
                        <input type="text" class="form-control" placeholder="Facebook Profile" x-model="formData.social_fb">
                    </div>
                </div>
                <div class="mb-3">
                    <div class="input-group">
                        <span class="input-group-text bg-primary text-white"><i class="bi bi-instagram"></i></span>
                        <input type="text" class="form-control" placeholder="Instagram Profile" x-model="formData.social_insta">
                    </div>
                </div>
                <div class="mb-3">
                    <div class="input-group">
                        <span class="input-group-text bg-primary text-white"><i class="bi bi-linkedin"></i></span>
                        <input type="text" class="form-control" placeholder="LinkedIn Profile" x-model="formData.social_linkedin">
                    </div>
                </div>
                <div class="mb-3">
                    <div class="input-group">
                        <span class="input-group-text bg-danger text-white"><i class="bi bi-youtube"></i></span>
                        <input type="text" class="form-control" placeholder="YouTube Channel" x-model="formData.social_yt">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary w-100 py-3 mt-4" :disabled="isPressed">
                    <span x-show="!isPressed">Update Profile</span>
                    <span x-show="isPressed" class="spinner-border spinner-border-sm"></span>
                    <span x-show="isPressed">Please wait...</span>
                </button>

            </form>
        </div>
    </div>
</main>
@endsection

@push('inline-scripts')
    <script>
        function businessProfileForm(business, subIds, servIds) {
            return {
                isPressed: false,
                isLoading: true,
                formData: {
                    company_name: '',
                    email: '',
                    mobile_number: '',
                    about: '',
                    state_id: 35,
                    district_id: null,
                    latitude: '',
                    longitude: '',
                    address: '',
                    vendor_category_id: null,
                    vendor_subcategory_ids: [],
                    vendor_service_ids: [],
                    whatsapp_no: '',
                    whyus_content: '',
                    call_number: '',
                    gstin: '',
                    social_fb: '',
                    social_insta: '',
                    social_linkedin: '',
                    social_yt: '',
                    social_google_business: '',
                },
                states: [],
                districts: [],
                vendorCategories: [],
                vendorSubcategories: [],
                vendorServices: [],
                errors: {},
                imagePreview: null,
                logoFile: null,
                tsInstance: null, // Holder for the Tom Select instance
                ts1Instance: null, // Holder for the Tom Select instance

                init() {
                    // Pre-fill if editing (usually passed via global window variable from Laravel)
                    this.formData = { ...business};
                    // Ensure these are treated as arrays immediately
                    this.formData.vendor_subcategory_ids = Array.isArray(subIds) ? subIds : [];
                    this.formData.vendor_service_ids = Array.isArray(servIds) ? servIds : [];
                    console.log(this.formData);
                    if(business.logo_url) {
                        this.imagePreview = '/uploads/'+business.logo_url;
                    }

                    // Initialize Tom Select for Subcategories
                    this.tsInstance = new TomSelect(this.$refs.subcatSelect, {
                        plugins: ['remove_button'],
                        valueField: 'id',
                        labelField: 'name',
                        searchField: 'name',
                        onChange: (values) => {
                            // TomSelect returns strings usually; ensure they are IDs
                            this.formData.vendor_subcategory_ids = values;
                        }
                    });

                    // Initialize Tom Select for Services
                    this.ts1Instance = new TomSelect(this.$refs.servSelect, {
                        plugins: ['remove_button'],
                        valueField: 'id',
                        labelField: 'name',
                        searchField: 'name',
                        onChange: (values) => {
                            this.formData.vendor_service_ids = values;
                        }
                    });

                    this.setupEditor('aboutEditor', 'about');
                    this.setupEditor('whyUsEditor', 'whyus_content');

                    if(this.formData.state_id) {
                        this.fetchStates();
                    }

                    if(this.formData.district_id) {
                        this.fetchDistricts();
                    }

                    this.fetchVendorCategories();
                    this.fetchVendorSubcategories();
                    this.fetchVendorServices();
                },

                // Generic function to setup any Quill instance
                setupEditor(refName, dataKey) {
                    const container = this.$refs[refName];

                    // 1. Guard Clause: If the editor inner-container exists, stop here.
                    if (container.querySelector('.ql-editor')) {
                        return;
                    }

                    const quill = new Quill(container, {
                        theme: 'snow'
                    });

                    // 2. Set initial content (safely handle null/undefined)
                    quill.root.innerHTML = this.formData[dataKey] || '';

                    // 3. Sync changes back
                    quill.on('text-change', () => {
                        this.formData[dataKey] = quill.root.innerHTML;
                    });
                },

                fetchStates() {
                    try {
                        axios.get('/dropdown/states?country_id=101')
                        .then(res => {
                            this.states = res.data;
                            if(this.formData.state_id) this.fetchDistricts();
                        })
                        .finally(() => {
                            this.isLoading = false;
                        });
                    } catch (e) { console.error(e); }
                },

                fetchDistricts() {
                    if (!this.formData.state_id) return;

                    axios.get(`/dropdown/districts?state_id=${this.formData.state_id}`)
                        .then(res => {
                            this.districts = res.data;
                        })
                        .finally(() => {
                            this.isLoading = false;
                        });
                },

                fetchVendorCategories() {
                    axios.get(`/dropdown/vendorCategories?state_id=${this.formData.state_id}`)
                        .then(res => {
                            this.vendorCategories = res.data;
                        });
                },
                
                fetchVendorSubcategories() {
                    if (!this.formData.vendor_category_id) {
                        this.tsInstance.clear();
                        this.tsInstance.clearOptions();
                        return;
                    }

                    axios.get(`/dropdown/vendorSubcategories?vendor_category_id=${this.formData.vendor_category_id}`)
                        .then(res => {
                            this.vendorSubcategories = res.data;

                            // 1. Clear existing options in the UI
                            this.tsInstance.clear();
                            this.tsInstance.clearOptions();

                            // 2. Add the new data
                            this.tsInstance.addOptions(res.data);

                            // Convert to strings as TomSelect values are often handled as strings
                            let selected = this.formData.vendor_subcategory_ids.map(id => String(id));
                            this.tsInstance.setValue(selected);
                            this.tsInstance.refreshOptions(false);
                            
                            // 3. Refresh the dropdown view
                            this.tsInstance.refreshOptions(false);
                        });
                },

                fetchVendorServices() {
                    if (!this.formData.vendor_category_id) {
                        this.ts1Instance.clear();
                        this.ts1Instance.clearOptions();
                        return;
                    }

                    axios.get(`/dropdown/vendorServices?vendor_category_id=${this.formData.vendor_category_id}`)
                        .then(res => {
                            this.vendorSubcategories = res.data;

                            // 1. Clear existing options in the UI
                            this.ts1Instance.clear();
                            this.ts1Instance.clearOptions();

                            // 2. Add the new data
                            this.ts1Instance.addOptions(res.data);

                            // IMPORTANT: Set the values AFTER options are added
                            // Tom Select needs the options to exist in its internal list to select them
                            let selected = this.formData.vendor_service_ids.map(id => String(id));
                            this.ts1Instance.setValue(selected);
                            
                            // 3. Refresh the dropdown view
                            this.ts1Instance.refreshOptions(false);
                        });
                },

                handleImageUpload(event) {
                    const file = event.target.files[0];
                    if (file) {
                        this.logoFile = file;
                        this.imagePreview = URL.createObjectURL(file);
                    }
                },

                async fetchLocation() {
                    if (!navigator.geolocation) {
                        alert("Geolocation is not supported");
                        return;
                    }
                    navigator.geolocation.getCurrentPosition((pos) => {
                        this.formData.latitude = pos.coords.latitude.toFixed(6);
                        this.formData.longitude = pos.coords.longitude.toFixed(6);
                    });
                },

                async submitForm() {
                    this.isPressed = true;
                    this.errors = {};

                    const formPayload = new FormData();
                    Object.keys(this.formData).forEach(key => {
                        const value = this.formData[key];

                        if (key === 'vendor_subcategory_ids' || key === 'vendor_service_ids') {
                            // FIXED: Laravel needs each array item appended separately to key[]
                            if (Array.isArray(value)) {
                                value.forEach(id => {
                                    formPayload.append(`${key}[]`, id);
                                });
                            }
                        // } else if (value !== null && value !== undefined) {
                        } else {
                            formPayload.append(key, value);
                        }
                    });
                    if (this.logoFile) formPayload.append('logo', this.logoFile);

                    let request = axios.post(`/business-profile/${this.formData.id}/update`, formPayload);

                    // execute the request
                    request
                        .then(res => {
                            // successful request
                            showToast('Business Profile updated!');
                            setTimeout(() => {
                                window.location.reload(true);
                            }, 500);
                        })
                        .catch(error => {
                            this.isPressed = false;
                            this.isLoading = false;
                            if(error.response && error.response.status === 422) {
                                console.log(error.response.data);
                                this.errors = error.response.data.errors;
                                // Error notification
                                showToast('Please fill all details!', 'error');
                            } else {
                                console.error(error);
                                showToast('Something went wrong! Please try again later...', 'error');
                            }
                        });
                }
            }
        }
    </script>
@endpush