@extends('adminlte::page')
@section('title', 'Dashboard | Mintavia Admin')
<style>
    .img-upload-box {
        width: 60%;
        aspect-ratio: 1/1;
        border: 2px dashed #452929;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background-color: #f9f9f9;
    }

    .img-upload-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>
<style>
    .form-control {
        font-weight: bold !important;
        font-size: 1.1rem !important;
    }

    select.form-control,
    textarea.form-control {
        font-weight: bold !important;
        font-size: 1.1rem !important;
    }

    /* Optional: make placeholders bold too */
    .form-control::placeholder {
        font-weight: bold;
        color: #999;
    }
</style>

@section('content')

    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Create Company</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.selectcompany') }}">
                            <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger" type="button">
                                <i class="fa fa-arrow-circle-left"></i> Back
                            </button>
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <form action="{{ route('admin.company-store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        {{-- Contact & Tax Details --}}
                        <div class="row">
                            <div class="col-md-6">
                                <label for="company">Enter name of Company/ Firm/ Organization</label>
                                <input id="company" name="company" type="text"
                                    class="form-control @error('company') is-invalid @enderror">
                                <x-error field="company" />
                            </div>
                            <div class="col-md-2">
                                <label for="tax_system">Select Taxation System</label>
                                <input id="tax_system" name="tax_system" value="0" type="text"
                                    class="form-control @error('tax_system') is-invalid @enderror">
                                <x-error field="tax_system" />
                            </div>
                            <div class="col-md-2">
                                <label for="tax_no">Enter Tax No. (GSTIN / VAT No.)</label>
                                <input id="tax_no" name="tax_no" type="text"
                                    class="form-control @error('tax_no') is-invalid @enderror"
                                    oninput="extractGSTDetails(this.value)">
                                <x-error field="tax_no" />
                            </div>

                            <div class="col-md-2">
                                <label for="pan_no">Enter PAN No.</label>
                                <input id="pan_no" name="pan_no" type="text"
                                    class="form-control @error('pan_no') is-invalid @enderror" readonly>
                                <x-error field="pan_no" />
                            </div>
                        </div>
                        {{-- Phone & Email --}}
                        <div class="row mt-2">
                            <div class="col-md-3">
                                <label for="mobile_no">Enter Mobile No.</label>
                                <input id="mobile_no" name="mobile_no" type="text"
                                    class="form-control @error('mobile_no') is-invalid @enderror">
                                <x-error field="mobile_no" />
                            </div>
                            <div class="col-md-3">
                                <label for="phone_no">Enter Phone No.</label>
                                <input id="phone_no" name="phone_no" type="text"
                                    class="form-control @error('phone_no') is-invalid @enderror">
                                <x-error field="phone_no" />
                            </div>
                            <div class="col-md-3">
                                <label for="email">Enter Email</label>
                                <input id="email" name="email" type="email"
                                    class="form-control @error('email') is-invalid @enderror">
                                <x-error field="email" />
                            </div>
                            <div class="col-md-3">
                                <label for="website">Enter Website</label>
                                <input id="website" name="website" type="text"
                                    class="form-control @error('website') is-invalid @enderror">
                                <x-error field="website" />
                            </div>
                        </div>

                        {{-- Address Info --}}
                        <div class="row mt-2">
                            <div class="col-md-3">
                                <label for="address_1">Enter Address 1</label>
                                <input id="address_1" name="address_1" type="text"
                                    class="form-control @error('address_1') is-invalid @enderror">
                                <x-error field="address_1" />
                            </div>
                            <div class="col-md-3">
                                <label for="address_2">Enter Address 2</label>
                                <input id="address_2" name="address_2" type="text"
                                    class="form-control @error('address_2') is-invalid @enderror">
                                <x-error field="address_2" />
                            </div>
                            <div class="col-md-3">
                                <label for="country">Select Country</label>
                                <select name="country" class="form-control">
                                    <option value="IN">India</option>
                                </select>
                                <x-error field="country" />
                            </div>
                            <div class="col-md-3 position-relative">
                                <label for="state">Enter State</label>
                                <input id="state" name="state" type="text"
                                    class="form-control @error('state') is-invalid @enderror" autocomplete="off"
                                    oninput="filterStateList(this.value)" onclick="toggleStateList(true)">
                                <div id="state-list" class="border position-absolute bg-white w-100"
                                    style="display:none; max-height: 200px; overflow-y: auto; z-index: 10;">
                                    @foreach (\App\Models\Company::stateList() as $code => $name)
                                        <div class="state-item px-2 py-1"
                                            onclick="selectState('{{ $name }}', '{{ $code }}')"
                                            style="cursor: pointer;">
                                            {{ $name }}
                                        </div>
                                    @endforeach
                                </div>
                                <x-error field="state" />
                            </div>

                        </div>


                        {{-- Location --}}
                        <div class="row mt-2">
                            <div class="col-md-3">
                                <label for="code">Enter Code</label>
                                <input id="code" name="code" type="text"
                                    class="form-control @error('code') is-invalid @enderror" readonly>
                                <x-error field="code" />
                            </div>
                            <div class="col-md-3 position-relative">
                                <label for="city">Enter City</label>
                                <input id="city" name="city" type="text"
                                    class="form-control @error('city') is-invalid @enderror" onclick="showCityList()"
                                    placeholder="Select City">
                                <div id="city-list" class="border bg-white w-100 position-absolute"
                                    style="display:none; max-height:200px; overflow-y:auto; z-index:10;"></div>
                                <x-error field="city" />
                            </div>
                            <div class="col-md-3 position-relative">
                                <label for="pincode">Enter Pincode</label>
                                <input id="pincode" name="pincode" type="text"
                                    class="form-control @error('pincode') is-invalid @enderror" 
                                    onclick="showPincodeList()" placeholder="Select Pincode">
                                <div id="pincode-list" class="border bg-white w-100 position-absolute"
                                    style="display:none; max-height:200px; overflow-y:auto; z-index:10;">
                                </div>
                                <x-error field="pincode" />
                            </div>

                            <div class="col-md-3">
                                <label for="upi_link">Bank UPI QR Link</label>
                                <input type="text" id="upi_link" name="upi_link"
                                    class="form-control @error('upi_link') is-invalid @enderror"
                                    placeholder="e.g. upi://pay?pa=xxx@upi">
                                <x-error field="upi_link" />
                            </div>

                        </div>
                        {{-- Company Code and Dates --}}
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label for="company_code">Company Code (Leave blank to auto-generate)</label>
                                <input id="company_code" name="company_code" type="text"
                                    class="form-control @error('company_code') is-invalid @enderror">
                                <x-error field="company_code" />
                            </div>
                            <div class="col-md-4">
                                <label for="start_date">Book Start on</label>
                                <input type="date" id="start_date" name="start_date"
                                    class="form-control @error('start_date') is-invalid @enderror">
                                <x-error field="start_date" />
                            </div>
                            <div class="col-md-4">
                                <label for="end_date">Year Closing Date</label>
                                <input type="date" id="end_date" name="end_date"
                                    class="form-control @error('end_date') is-invalid @enderror">
                                <x-error field="end_date" />
                            </div>
                        </div>
                        {{-- Bank Details, Logo, QR, UPI --}}
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="bank_detail">Bank Detail</label>
                                <textarea id="bank_detail" name="bank_detail" rows="5"
                                    class="form-control @error('bank_detail') is-invalid @enderror"
                                    placeholder="Bank Name, A/C No., IFSC, Branch, etc."></textarea>
                                <x-error field="bank_detail" />
                            </div>
                            <div class="col-md-2">
                                <label>Logo</label>
                                <div class="img-upload-box" onclick="document.getElementById('companies_logo').click()">
                                    <img id="logoPreview" src="{{ asset('images/placeholder.png') }}"
                                        alt="Logo Preview" />
                                </div>
                                <input type="file" id="companies_logo" name="companies_logo" accept="image/*"
                                    style="display: none" onchange="previewImage(this, 'logoPreview')">
                                <x-error field="logo" />
                            </div>

                            <div class="col-md-2">
                                <label>Company QR Code</label>
                                <div class="img-upload-box" onclick="document.getElementById('company_qr').click()">
                                    <img id="qrPreview" src="{{ asset('images/placeholder.png') }}" alt="QR Preview" />
                                </div>
                                <input type="file" id="company_qr" name="company_qr" accept="image/*"
                                    style="display: none" onchange="previewImage(this, 'qrPreview')">
                                <x-error field="company_qr" />
                            </div>
                            <div class="col-md-2">
                                <label>Bank QR Code</label>
                                <div class="img-upload-box" onclick="document.getElementById('bank_qr').click()">
                                    <img id="qrBank" src="{{ asset('images/placeholder.png') }}" alt="QR Bank" />
                                </div>
                                <input type="file" id="bank_qr" name="bank_qr" accept="image/*"
                                    style="display: none" onchange="previewImage(this, 'qrBank')">
                                <x-error field="bank_qr" />
                            </div>

                        </div>



                        {{-- Submit --}}
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <button class="btn btn-block btn-success" type="submit">Create Company</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
<script>
    function previewImage(input, previewId) {
        const file = input.files[0];
        const preview = document.getElementById(previewId);

        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    }
</script>
<script>
    // Apply to all inputs and textareas except type="date", type="email", etc.
    document.addEventListener("DOMContentLoaded", function() {
        const inputs = document.querySelectorAll("input[type='text'], input[type='number'], textarea");

        inputs.forEach(function(input) {
            input.addEventListener("blur", function() {
                input.value = input.value.toUpperCase();
            });
        });
    });
</script>
<script>
    function extractGSTDetails(gst) {
        // Ensure input is at least 15 characters
        if (gst.length === 15) {
            const panNumber = gst.substring(2, 12);
            // Set values to respective fields
            document.getElementById('pan_no').value = panNumber;
        } else {
            // Clear fields if GSTIN is invalid
            document.getElementById('pan_no').value = '';
        }
    }
</script>
<script>
    function selectState(stateName, code) {
        document.getElementById('state').value = stateName;
        document.getElementById('code').value = code;
        document.getElementById('state-list').style.display = 'none';
    }

    function filterStateList(value) {
        const list = document.getElementById('state-list');
        const items = list.querySelectorAll('.state-item');

        let hasMatch = false;

        items.forEach(item => {
            if (item.innerText.toLowerCase().includes(value.toLowerCase())) {
                item.style.display = 'block';
                hasMatch = true;
            } else {
                item.style.display = 'none';
            }
        });

        list.style.display = hasMatch ? 'block' : 'none';
    }

    function toggleStateList(show) {
        document.getElementById('state-list').style.display = show ? 'block' : 'none';
    }

    // Hide state list when clicking outside
    document.addEventListener('click', function(e) {
        if (!document.getElementById('state').contains(e.target) &&
            !document.getElementById('state-list').contains(e.target)) {
            document.getElementById('state-list').style.display = 'none';
        }
    });
</script>
<script>
    const stateCityMap = @json(\App\Models\Company::stateCityList());

    function showCityList() {
        const stateCode = document.getElementById('code').value;
        const cityListContainer = document.getElementById('city-list');
        const cityInput = document.getElementById('city');

        if (!stateCode || !stateCityMap[stateCode]) {
            cityListContainer.innerHTML = `<div class='p-2 text-danger'>Please select a valid state first.</div>`;
            cityListContainer.style.display = 'block';
            return;
        }

        const cities = stateCityMap[stateCode];
        let html = '';
        cities.forEach(city => {
            html +=
                `<div class="px-2 py-1 city-item" style="cursor:pointer;" onclick="selectCity('${city}')">${city}</div>`;
        });

        cityListContainer.innerHTML = html;
        cityListContainer.style.display = 'block';
    }

    function selectCity(cityName) {
        document.getElementById('city').value = cityName;
        document.getElementById('city-list').style.display = 'none';
    }

    // Hide city list when clicked outside
    document.addEventListener('click', function(event) {
        const cityInput = document.getElementById('city');
        const cityList = document.getElementById('city-list');
        if (!cityInput.contains(event.target) && !cityList.contains(event.target)) {
            cityList.style.display = 'none';
        }
    });
</script>
<script>
    const cityPincodeMap = @json(\App\Models\Company::cityPincodeMap());

    // Called when a city is selected
    function selectCity(cityName) {
        document.getElementById('city').value = cityName;
        document.getElementById('city-list').style.display = 'none';

        // ✅ Reset Pincode
        document.getElementById('pincode').value = '';
        document.getElementById('pincode-list').innerHTML = '';
        document.getElementById('pincode-list').style.display = 'none';
    }

    // Show list of pin codes based on selected city
    function showPincodeList() {
        const city = document.getElementById('city').value;
        const pincodeListContainer = document.getElementById('pincode-list');

        if (!city || !cityPincodeMap[city]) {
            pincodeListContainer.innerHTML = `<div class='p-2 text-danger'>Please select a valid city first.</div>`;
            pincodeListContainer.style.display = 'block';
            return;
        }

        const pincodes = cityPincodeMap[city];
        let html = '';
        pincodes.forEach(pin => {
            html +=
                `<div class="px-2 py-1" style="cursor:pointer;" onclick="selectPincode('${pin}')">${pin}</div>`;
        });

        pincodeListContainer.innerHTML = html;
        pincodeListContainer.style.display = 'block';
    }

    // Called when a pin code is clicked
    function selectPincode(pin) {
        document.getElementById('pincode').value = pin;
        document.getElementById('pincode-list').style.display = 'none';
    }

    // Hide pincode list when clicking outside
    document.addEventListener('click', function(event) {
        const pinInput = document.getElementById('pincode');
        const pinList = document.getElementById('pincode-list');
        if (!pinInput.contains(event.target) && !pinList.contains(event.target)) {
            pinList.style.display = 'none';
        }
    });
</script>