@extends('master.authMaster')
@section('content')
<div class="intro-y col-span-12 lg:col-span-12">

    <div class="intro-y box mt-5" style=" padding: 20px 20px 30px 20px;">
        <!-- BEGIN: Horizontal Form -->
        <div class="intro-y mt-5">
            @php
            $orgId = \App\Models\Organisation::current()->organisation_id;
            @endphp
            <h2 class="text-xl font-bold mb-4">Add Members in Bulk </h2>

            <div class="mb-4">
                <a href="{{ route('donor.downloadSampleCSV') }}"
                    class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                    Download Sample CSV
                </a>
            </div>


            {{-- Show validation errors --}}
            @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <ul class="list-disc pl-5">
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <!-- resources/views/donors/import.blade.php -->
            <form action="{{ route('donors.importCSV') }}" method="POST" enctype="multipart/form-data" id="bulk_cv_import">
                @csrf
                <div class="preview">
                    <div class="intro-y col-span-12 lg:col-span-12">
                        <div class="intro-y">
                            <div class="p-5" id="input">
                                <div class="preview">
                                    <div class="w-full -ml-4 -mr-4 flex flex-wrap">
                                        <div class="w-6/12 px-4">
                                            <div class="mt-3">
                                                <label>Organisation <span style="color: red">*</span></label>
                                                <select id="organisation_id" name="organisation_id"
                                                    class="input w-full border mt-2 custm-drpdwn" required disabled>
                                                    <option value="">-- Select Organisation --</option>
                                                    @foreach ($organisations as $organisation)
                                                    <option value="{{ $organisation->organisation_id }}"
                                                        {{ old('organisation_id', $orgId) == $organisation->organisation_id ? 'selected' : '' }}>
                                                        {{ $organisation->organisation_name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <div class="text-red-500 text-sm mt-1 error-message"
                                                    id="error-organisation"></div>
                                            </div>
                                        </div>
                                        <input type="hidden" value="{{ $orgId }}" id="organisation_id"
                                            name="organisation_id">

                                        <div class="w-6/12 px-4">
                                            <div class="mt-3" id="accountTypeWrapper">
                                                <label>Division</label>
                                                <select id="account_type_id" name="account_type_id"
                                                    class="input w-full border mt-2 custm-drpdwn" disabled>
                                                    <option value="">-- Select Division --</option>
                                                </select>
                                                <small id="accountTypeMsg" class="text-red-500" style="display:none;">
                                                    Please select organisation first
                                                </small>
                                                <div class="text-red-500 text-sm mt-1 error-message"
                                                    id="error-account-type"></div>
                                            </div>
                                        </div>
                                        <div class="w-6/12 px-4">
                                            <div class="mt-3">
                                                <label>Select Member Type &nbsp; <span
                                                        style="color:red;">*</span></label>
                                                <select name="donor_type" class="w-full border mt-2 p-2 rounded"
                                                    required disabled>

                                                    <option value="members" selected>Members</option>
                                                    <option value="foreign_members">Family Members</option>
                                                    <option value="non_members">Non Members</option>
                                                </select>
                                                <div class="text-red-500 text-sm mt-1 error-message">
                                                    @error('donor_type')
                                                    {{ $message }}
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="w-6/12 px-4">
                                            <div class="mt-3">
                                                <label>Upload Csv File</label>
                                                <input type="file" class="w-full border mt-2 p-2 rounded"
                                                    name="csv_file" accept="" multiple required>
                                                <ul id="file-list" class="mt-2 text-sm text-gray-600 space-y-1">
                                                </ul>
                                                <div class="text-red-500 text-sm mt-1 error-message"
                                                    id="error-csv-file"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sm:pl-5 mt-5">

                        <a href="{{ route('donor.index') }}"><span
                                class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 mr-2">
                                ← Back
                            </span></a>
                        <button type="submit" id="import_csv_submit" class="button w-24 bg-theme-1 text-white">Save</button>
                    </div>
                </div>
            </form>
            </form>

        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

     $("#bulk_cv_import").on("submit", function () {
        let $submitBtn = $("#import_csv_submit");

        $submitBtn.prop("disabled", true);  // disable button
        $submitBtn.text("Submitting..."); // update text
        submitBtn.classList.add('opacity-70', 'cursor-not-allowed');
        return true; // allow form to submit
    });
    //organisation and accountype checking start.
    let accountTypes = @json($accountTypes);
    let orgSelect = document.getElementById('organisation_id');
    let accSelect = document.getElementById('account_type_id');
    let msg = document.getElementById('accountTypeMsg');


    let oldOrg = "{{ old('organisation_id', $orgId) }}";
    let oldAcc = "{{ old('account_type_id') }}";

    function populateAccountTypes(oldOrg) {
        accSelect.innerHTML = '<option value="">-- Select Division --</option>';

        if (oldOrg) {
            let filtered = accountTypes.filter(at => at.organisation_id == oldOrg);

            if (filtered.length > 0) {
                document.getElementById("accountTypeWrapper").style.display = "block";
                filtered.forEach(at => {
                    let option = document.createElement('option');
                    option.value = at.account_type_id;
                    option.textContent = at.account_type_Name;

                    if (oldAcc == at.account_type_id) {
                        option.selected = true;
                    }
                    accSelect.appendChild(option);
                });

                accSelect.disabled = false;
                msg.style.display = "none";
            } else {
                accSelect.disabled = true;
                msg.textContent = "No Division found for this organisation.";
                msg.style.display = "block";
                document.getElementById("accountTypeWrapper").style.display = "none";
            }
        } else {
            accSelect.disabled = true;
            msg.textContent = "Please select organisation first.";
            msg.style.display = "block";
        }
    }

    orgSelect.addEventListener('change', function() {
        populateAccountTypes(this.value);
    });

    accSelect.addEventListener('focus', function() {
        if (!orgSelect.value) {
            msg.textContent = "Please select organisation first.";
            msg.style.display = "block";
            setTimeout(() => msg.style.display = "none", 2000);
        }
    });

    if (oldOrg) {
        populateAccountTypes(oldOrg);
    }
    //organisation and accountype checking end.
</script>
@if (session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Success',
        text: "{{ session('success') }}",
        confirmButtonColor: '#3085d6',
        confirmButtonText: 'OK'
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = "{{ route('donor.index') }}";
        }
    });
</script>
@endif

@if (session('error'))
<script>
    Swal.fire({
        icon: 'error',
        title: 'Error',
        text: "{{ session('error') }}",
        confirmButtonColor: '#d33',
        confirmButtonText: 'OK'
    });
</script>
@endif

@endsection