@extends('layouts.vertical', ['page_title' => 'Datatables'])

@section('css')
    <link href="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="{{ asset('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row pt-4">
            <div class="col-md-9 p-2 m-auto border">
                <div class="card-header bg-light border border-primary d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title mb-0 text-primary">
                            <i class="bi bi-download me-2 text-primary"></i>Export {{ $title }} List
                        </h5>
                        <small class="text-muted">
                            <i class="bi bi-funnel-fill me-1"></i>Apply filters below to customize the export.
                        </small>
                    </div>
                    <a href="/contact/export" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-arrow-left me-1"></i>Back
                    </a>
                </div>
                <div class="card-body">
                    <form id="exportForm">
                        <meta name="csrf-token" content="{{ csrf_token() }}">
                        <input type="hidden" name="exportid" id="field-exportid" value="">
                        <h6 class="mb-3 text-info">
                            <i class="bi bi-sliders me-1"></i>Filter Options
                        </h6>

                        <div class="mb-3">
                            <label for="multiSelect" class="form-label fw-semibold">
                                <i class="bi bi-person-badge me-1 text-secondary"></i>Position Codes
                            </label>
                            <select id="multiSelect" name="filter_position_code[]" multiple class="form-control select2"
                                required>
                                @foreach ($positioncode as $key => $pos)
                                    <option value="{{ $key }}">{{ $pos }}</option>
                                @endforeach
                            </select>
                            <small class="form-text text-muted">You can select one or more position code.</small>
                        </div>

                        <div class="mb-3">
                            <label for="statusSelect" class="form-label fw-semibold">
                                <i class="bi bi-shield-check me-1 text-success"></i>Export Status
                            </label>
                            <select id="statusSelect" name="filter_status" class="form-control" required>
                                <option value="">-- Select Status --</option>
                                <option value="active">Active</option>
                                <option value="disabled">Disabled</option>
                                <option value="deleted">Deleted</option>
                            </select>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" id="submitBtn" class="btn btn-primary">
                                <span class="spinner-border spinner-border-sm d-none" id="loader" role="status"
                                    aria-hidden="true"></span>
                                <i class="bi bi-file-earmark-arrow-down me-1"></i>
                                <span id="btnText">Export {{ $title }} List</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('assets/libs/select2/select2.min.js') }}"></script>
    <script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>

    <script type="text/javascript">
        let downloadPollingInterval = null;

        $(document).ready(function() {

            $('#multiSelect').select2({
                placeholder: "Select one or more options",
                width: '100%'
            });

            $('#multiSelect').on('change', function() {
                const selectedOptions = $(this).val();
                console.debug("MultiSelect changed:", selectedOptions);
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#exportForm').on('submit', function(e) {
                e.preventDefault();
                console.log("Form submitted");

                $('#loader').removeClass('d-none');
                $('#btnText').text('Submitting...');

                var formData = new FormData(this);

                $.ajax({
                    url: '/contact/exportcreate',
                    method: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.status === "success") {
                            $('#loader').addClass('d-none');
                            $('#btnText').text('Submit');
                            console.log("Form submitted", response.data.item.id);
                            $('#field-exportid').val(response.data.item.id)
                            Swal.fire({
                                title: 'Processing Export',
                                html: ` <div class="spinner-border text-primary mb-3" role="status"> <span class="visually-hidden">Loading...</span> </div> <p>Please wait while we generate your export file...</p> <a href="/contact/export" class="btn btn-sm btn-secondary mt-3">View Export List</a> `,
                                icon: 'info',
                                showConfirmButton: false,
                                showCloseButton: true,
                                allowOutsideClick: false,
                                allowEscapeKey: false
                            });

                            downloadPollingInterval = setInterval(() => {
                                pollingForDownload();
                            }, 9000);
                        } else {

                        }
                    },
                    error: function(e) {
                        console.log('error', e)
                    }
                });
            });
        });

        function pollingForDownload() {
            $.ajax({
                url: '/contact/exportgetcreatedcsv',
                method: "GET",
                data: {
                    id: $('#field-exportid').val()
                },
                success: function(response) {
                    if (response.status === "success") {
                        if (response.data.item.file_status == 'ready') {
                            Swal.update({
                                title: 'Export Ready!',
                                text: 'Your file has been generated successfully.',
                                icon: 'success',
                                showConfirmButton: true,
                                confirmButtonText: 'Go to Export Page',
                                showCloseButton: true, // ✅ Shows the "X" icon
                                html: `<a href="${response.data.item.download_url}" class="btn btn-sm btn-secondary mt-3" download>Download</a>`
                            });
                            Swal.hideLoading();
                            clearInterval(downloadPollingInterval);
                            Swal.getConfirmButton().addEventListener('click', () => {
                                window.location.href = "/export";
                            });
                        } else if (response.data.item.file_status == 'No Data Found') {
                            Swal.update({
                                title: 'No Contact Found!',
                                icon: 'warning',
                                showConfirmButton: true,
                                showCancelButton: true,
                                showCloseButton: true,
                                cancelButtonText: 'Close',
                                confirmButtonText: 'Go to Export Page',
                                html: `<a href="/contact/export" class="btn btn-sm btn-secondary mt-3">View Export List</a>`
                            });
                            Swal.hideLoading();
                            clearInterval(downloadPollingInterval);
                            Swal.getConfirmButton().addEventListener('click', () => {
                                window.location.href = "/export";
                            });
                        }
                    } else {
                        Swal.fire({
                            title: 'Export Failed',
                            text: response.message || 'An error occurred while processing the export.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(e) {
                    Swal.fire({
                        title: 'Request Error',
                        text: 'Unable to fetch export status. Please try again later.',
                        icon: 'error',
                        confirmButtonText: 'OK',
                        showCloseButton: true,
                    });
                    console.log('getone error', e);
                }
            });
        }
    </script>
@endsection