@extends('setting.nav')

@section('title', 'Home Page')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="row">
                <form action="{{ route('bulk.upload') }}" method="POST" enctype="multipart/form-data"
                    class="d-flex align-items-center" id="uploadexcelForm">
                    @csrf
                    <input type="hidden" name="admin_id" value="{{ Auth::id() }}">
                    @error('admin_id')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                    {{-- <span class="me-3">Select File </span> --}}
                    <input type="file" class="form-control me-2" id="bulk_file" name="bulk_file" accept=".csv,.xlsx"
                        required style="max-width: 250px;">
                    <button type="submit" class="btn btn-primary me-2">
                        Upload
                    </button>

                    <!-- Loader Overlay -->
                    <div id="loaderOverlay">
                        <div class="spinner">
                            <div class="text-light ">
                                Importing Excel
                                <span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span><span
                                    class="dot-4">.</span>
                            </div>
                            <div class="spinner-border text-light mt-3" style="margin-left: 150px;" role="status">
                                <span class="sr-only"></span>
                            </div>
                        </div>
                    </div>


                    <!-- CSS (already shared by you) -->
                    <style>
                        #loaderOverlay {
                            font-size: 38px;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100vh;
                            background-color: rgba(0, 0, 0, 0.5);
                            display: none;
                            z-index: 1050;
                        }

                        #loaderOverlay .spinner {
                            position: absolute;
                            top: 50%;
                            left: 48%;
                            transform: translate(-50%, -50%);
                        }

                        .dot-1,
                        .dot-2,
                        .dot-3,
                        .dot-4,
                        .dot-5,
                        .dot-6 {
                            opacity: 0;
                            animation: blink 1.5s infinite;
                        }

                        .dot-2 {
                            animation-delay: 0.3s;
                        }

                        .dot-3 {
                            animation-delay: 0.6s;
                        }

                        .dot-4 {
                            animation-delay: 0.9s;
                        }

                        .dot-5 {
                            animation-delay: 0.12s;
                        }

                        .dot-6 {
                            animation-delay: 0.15s;
                        }

                        @keyframes blink {
                            0% {
                                opacity: 0;
                            }

                            33% {
                                opacity: 1;
                            }

                            66% {
                                opacity: 0;
                            }

                            100% {
                                opacity: 0;
                            }
                        }
                    </style>


                    <!-- JS to show loader -->
                    <script>
                        document.getElementById("uploadexcelForm").addEventListener("submit", function() {
                            document.getElementById("loaderOverlay").style.display = "block";
                        });
                    </script>
                    <a href="{{ route('sample.download') }}" class="btn btn-success">
                        Download Sample File
                    </a>
                    @if (session('excel_inserted_success') && session('excel_inserted_success')['insertedCount'] !== 0)
                        <div
                            style="border: 1px solid #28a745; background-color: #d4edda; color: #155724;  padding: 8px; padding-right: 15px; margin-left:50px; border-radius: 5px; position: relative;">
                            <button onclick="this.parentElement.style.display='none';"
                                style="position: absolute; top:-10px; right: -5px; background: none; border: none; font-size: 18px; cursor: pointer;">&times;
                            </button>
                            <span style="margin-top: 0; font-weight:bold;"> Successfully inserted records :-</span>
                            <span> Total <strong>{{ session('excel_inserted_success')['insertedCount'] ?? 0 }}</strong>
                                records
                                inserted successfully.</span>
                        </div>
                        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                        <script>
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: 'Total {{ session('excel_inserted_success')['insertedCount'] }} records inserted successfully.',
                                confirmButtonText: 'OK'
                            });
                        </script>

                        {{-- <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('excel_inserted_success')['message'] ?? 0 }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div> --}}
                    @endif
                </form>

                {{-- @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif --}}
            </div>

            <div class="row mt-3 p-3">

                {{-- sweat alert --}}
                {{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                <script>
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Total 123 records inserted successfully.',
                        confirmButtonText: 'OK'
                    });
                </script> --}}

                @error('bulk_file')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
                {{-- Excel Error  --}}
                @if (session('excel_error_column'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('excel_error_column') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                {{-- @if (session('excel_inserted_success'))
                    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                    <script>
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Total {{ session('excel_inserted_success')['insertedCount'] }} records inserted successfully.',
                            confirmButtonText: 'OK'
                        });
                    </script>
                @endif --}}

                @if (session('excel_error_catch'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('excel_error_catch') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if (session('excel_error'))
                    <div style="max-height: 450px; overflow-y: auto; overflow-x: auto;"
                        class="alert alert-secondary alert-dismissible fade show" role="alert">
                        <div class="col-12 mb-3">
                            <div class="p-3 border rounded bg-light">
                                <strong class="me-4">Note :- </strong>
                                {{-- <a href="#" class="btn btn-sm btn-dark">view</a> --}}
                                <span class="me-3 text-dark">Total Data :-
                                    <strong>{{ session('excel_error')['total_count'] ?? 0 }}</strong> </span>
                                {{-- <a href="#" class="btn btn-sm btn-dark">view</a> --}}
                                <span class="me-3 text-dark">Detected Data :-
                                    <strong>{{ session('excel_error')['detectedCount'] ?? 0 }}</strong> </span>
                                {{-- 
                            <a href="#" class="btn btn-sm btn-success" data-bs-toggle="modal"
                                data-bs-target="#excelModal" data-type="valid" data-title="Valid">View</a>
                            <span class="me-3 text-success">Valid :-
                                <strong>{{ session('excel_error')['validCount'] ?? 0 }}</strong> </span>
                            <a href="#" class="btn btn-sm btn-warning" data-bs-toggle="modal"
                                data-bs-target="#excelModal" data-type="blank" data-title="Blank">View</a>
                            <span class="me-3 text-warning">Blank :-
                                <strong>{{ session('excel_error')['emptyCount'] ?? 0 }}</strong> </span>
                            <a href="#" class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                data-bs-target="#excelModal" data-type="error" data-title="Error">View</a>
                            <span class="me-3 text-danger">Error :-
                                <strong>{{ session('excel_error')['errorCount'] ?? 0 }}</strong> </span>
                            <a href="#" class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                data-bs-target="#excelModal" data-type="duplicate" data-title="Duplicate">View</a>
                            <span class="me-4 text-primary">Duplicate :-
                                <strong>{{ session('excel_error')['duplicateCount'] ?? 0 }}</strong></span>
                                 --}}

                                @php
                                    $excelSession = session('excel_error') ?? [];

                                    $types = [
                                        'valid' => [
                                            'class' => 'success',
                                            'label' => 'Valid',
                                            'count' => $excelSession['validCount'] ?? 0,
                                            'data' => $excelSession['validData'] ?? [],
                                        ],
                                        'blank' => [
                                            'class' => 'warning',
                                            'label' => 'Blank',
                                            'count' => $excelSession['emptyCount'] ?? 0,
                                            'data' => $excelSession['blankData'] ?? [],
                                        ],
                                        'error' => [
                                            'class' => 'danger',
                                            'label' => 'Error',
                                            'count' => $excelSession['errorCount'] ?? 0,
                                            'data' => $excelSession['errorData'] ?? [],
                                        ],
                                        'duplicate' => [
                                            'class' => 'primary',
                                            'label' => 'Duplicate',
                                            'count' => $excelSession['duplicateCount'] ?? 0,
                                            'data' => $excelSession['duplicateData'] ?? [],
                                        ],
                                    ];
                                @endphp

                                @foreach ($types as $key => $type)
                                    <a href="#" class="btn btn-sm btn-{{ $type['class'] }}" data-bs-toggle="modal"
                                        data-bs-target="#excelModal" data-type="{{ $key }}"
                                        data-title="{{ $type['label'] }}" data-items='@json($type['data'] ?? [])'>
                                        Download {{ $type['label'] }} Data :- <strong>{{ $type['count'] }}</strong>
                                    </a>
                                    {{-- <span class="me-3 text-{{ $type['class'] }}">
                                        {{ $type['label'] }} :- <strong>{{ $type['count'] }}</strong>
                                    </span> --}}
                                @endforeach

                                <!-- DataTables CSS -->
                                <link rel="stylesheet"
                                    href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

                                <!-- Modal -->
                                <div class="modal fade" id="excelModal" tabindex="-1" aria-labelledby="excelModalLabel"
                                    aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header ">
                                                <h5 class="modal-title" id="excelModalLabel">Excel Details</h5>
                                                <button type="button" class="btn-close mt-2 me-2" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>

                                            <div class="modal-body">
                                                <!-- Form for Excel Download -->
                                                <form id="excelDownloadForm" method="POST"
                                                    action="{{ route('download.excel') }}" target="_blank">
                                                    @csrf
                                                    <input type="hidden" name="title" id="excelTitle">
                                                    <input type="hidden" name="data" id="excelData">
                                                    <button type="submit" class="btn btn-outline-success mb-3"
                                                        id="downloadBtn">
                                                        ⬇ Download Excel
                                                    </button>
                                                </form>

                                                <!-- Table to show data -->
                                                <table id="excelTable" class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>First Name</th>
                                                            <th>Last Name</th>
                                                            <th>Email Id</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="excelDataBody"></tbody>
                                                </table>
                                            </div>

                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- jQuery + DataTables JS -->
                                <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
                                <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

                                <script>
                                    let currentTitle = '';
                                    let dataTableInstance = null;

                                    const excelModal = document.getElementById('excelModal');

                                    excelModal.addEventListener('show.bs.modal', function(event) {
                                        const button = event.relatedTarget;
                                        const title = button.getAttribute('data-title');
                                        const rawData = button.getAttribute('data-items');
                                        const data = JSON.parse(rawData || '[]');

                                        currentTitle = title;

                                        // Update modal title
                                        document.getElementById('excelModalLabel').textContent = `Excel Data - ${title}`;

                                        // Fill form inputs
                                        document.getElementById('excelTitle').value = title;
                                        document.getElementById('excelData').value = JSON.stringify(data);

                                        // Destroy existing DataTable if present
                                        if ($.fn.DataTable.isDataTable('#excelTable')) {
                                            $('#excelTable').DataTable().destroy();
                                        }

                                        // Clear existing data rows
                                        document.getElementById('excelDataBody').innerHTML = '';

                                        // Populate new rows
                                        data.forEach(item => {
                                            const row = `<tr>
                <td>${item.first_name ?? ''}</td>
                <td>${item.last_name ?? ''}</td>
                <td>${item.email ?? ''}</td>
            </tr>`;
                                            document.getElementById('excelDataBody').insertAdjacentHTML('beforeend', row);
                                        });

                                        // Initialize DataTable
                                        setTimeout(() => {
                                            dataTableInstance = $('#excelTable').DataTable({
                                                paging: true,
                                                searching: true,
                                                ordering: true
                                            });
                                        }, 100);
                                    });

                                    // Form validation before export
                                    document.getElementById('excelDownloadForm').addEventListener('submit', function(e) {
                                        const data = document.getElementById('excelData').value;
                                        try {
                                            const parsed = JSON.parse(data);
                                            if (!Array.isArray(parsed) || parsed.length === 0) {
                                                alert('No data to export!');
                                                e.preventDefault();
                                            }
                                        } catch (err) {
                                            alert('Invalid data format!');
                                            e.preventDefault();
                                        }
                                    });
                                </script>



                                <ul class="mt-2 mb-0">
                                    <li>
                                        <span class="bg-success text-white"
                                            style=" border-radius: 0.25rem; font-size: 0.875em;">
                                            Green (Valid)
                                        </span>
                                        – All fields are valid. Data is correctly filled and ready for upload.
                                    </li>
                                    <li>
                                        <span
                                            style="background-color: #fff3cd; color: #664d03; border-radius: 0.25rem; font-size: 0.875em;">
                                            Yellow (Blank - Warning)
                                        </span>
                                        – Incomplete data detected ! One or more fields are empty. Please fill in all
                                        required
                                        fields before uploading.
                                    </li>
                                    <li>
                                        <span
                                            style="background-color: #f8d7da; color: #842029; border-radius: 0.25rem; font-size: 0.875em;">
                                            Red (Error)
                                        </span>
                                        – Invalid credentials detected ! Email ID is incorrect. Please
                                        verify
                                        and correct the entry.
                                    </li>
                                    <li>
                                        <span
                                            style="background-color: #d1e7dd; color: #0f5132; border-radius: 0.25rem; font-size: 0.875em;">
                                            Blue (Duplicate)
                                        </span>
                                        – Duplicate entry detected ! Please remove the duplicate row from the Excel file
                                        before
                                        uploading.
                                    </li>
                                </ul>
                            </div>
                            @if (session('excel_error') && isset(session('excel_error')['table']))
                                {!! session('excel_error')['table'] !!}
                            @endif
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

            </div>
            {{-- <div class="row mt-3 p-3">
                <div style="max-height: 450px; overflow-y: auto;" class="alert alert-secondary alert-dismissible fade show"
                    role="alert">
                    <div class="col-12 mb-3">
                        <div class="p-3 border rounded bg-light">
                            <strong class="me-4">Note :- </strong>
                            <span class="me-4 text-dark">Total Data :- <strong>6</strong> </span>
                            <span class="me-4 text-success">Valid :- <strong>1</strong> </span>
                            <span class="me-4 text-warning">Blank :- <strong>2</strong> </span>
                            <span class="me-4 text-danger">Error :- <strong>1</strong> </span>
                            <span class="me-5 text-primary">Duplicate :- <strong>2</strong></span>

                            <ul class="mt-2 mb-0">
                                <li>
                                    <span class="bg-success text-white"
                                        style=" border-radius: 0.25rem; font-size: 0.875em;">
                                        Green (Valid)
                                    </span>
                                    – All fields are valid. Data is correctly filled and ready for upload.
                                </li>
                                <li>
                                    <span
                                        style="background-color: #fff3cd; color: #664d03; border-radius: 0.25rem; font-size: 0.875em;">
                                        Yellow (Blank - Warning)
                                    </span>
                                    – Incomplete data detected ! One or more fields are empty. Please fill in all required
                                    fields before uploading.
                                </li>
                                <li>
                                    <span
                                        style="background-color: #f8d7da; color: #842029; border-radius: 0.25rem; font-size: 0.875em;">
                                        Red (Error)
                                    </span>
                                    – Invalid credentials detected ! Email ID or App Password is incorrect. Please verify
                                    and correct the entry.
                                </li>
                                <li>
                                    <span
                                        style="background-color: #d1e7dd; color: #0f5132; border-radius: 0.25rem; font-size: 0.875em;">
                                        Blue (Duplicate)
                                    </span>
                                    – Duplicate entry detected ! Please remove the duplicate row from the Excel file before
                                    uploading. <b> Excel file cannot be uploaded until all rows are valid. Please correct or
                                        remove invalid entries.</b>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <table class="table table-bordered">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>App Password</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="table-success">
                                <td>1</td>
                                <td>Rahul</td>
                                <td>Sharma</td>
                                <td>rahul@example.com</td>
                                <td>app@1234</td>
                            </tr>
                            <tr class="table-warning">
                                <td>2</td>
                                <td>Priya</td>
                                <td></td>
                                <td>priya@example.com</td>
                                <td>pass@5678</td>
                            </tr>
                            <tr class="table-danger">
                                <td>3</td>
                                <td>Amit</td>
                                <td>Kumar</td>
                                <td>amit@@example</td>
                                <td>amit@9999</td>
                            </tr>
                            <tr>
                                <td class="bg-success text-white">4</td>
                                <td class="bg-success text-white">Neha</td>
                                <td class="bg-success text-white">Verma</td>
                                <td class="bg-success text-white">neha@example.com</td>
                                <td class="bg-success text-white">neha@0000</td>
                            </tr>
                            <tr class="table-warning">
                                <td>5</td>
                                <td>Vikas</td>
                                <td>Yadav</td>
                                <td></td>
                                <td>vikas@1111</td>
                            </tr>
                            <tr class="table-success">
                                <td>6</td>
                                <td>Rahul</td>
                                <td>Sharma</td>
                                <td>rahul@example.com</td>
                                <td>app@1234</td>
                            </tr>
                        </tbody>
                    </table>

                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div> --}}

        </div>

        {{-- <div class="col-4">
            <div class="card shadow p-4" style="width: 400px;"> --}}
        {{-- <p>Authenticated User ID: {{ Auth::id() }}</p> --}}
        {{-- <h2 class="text-center mb-4">Employee Register</h2> --}}

        <!-- Success Message -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">{{ session('success') }} <a
                    href="{{ route('login') }}">Go to Login</a>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        {{-- @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif --}}
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <!-- Form Start -->
        {{-- <form action="{{ route('register.submit') }}" method="POST">
                    @csrf --}}

        <!-- Email -->
        {{-- <div class="mb-3">
                        <input type="hidden" name="auth_id" value="{{ Auth::id() }}">
                        <label class="form-label">Email Id </label>
                        <input type="text" name="email" required
                            class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}">
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div> --}}

        <!-- App Email -->
        {{-- <div class="mb-3">
                        <label class="form-label">App Email Password</label>
                        <input type="password" name="app_email" required
                            class="form-control @error('app_email') is-invalid @enderror" value="{{ old('app_email') }}">
                        @error('app_email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div> --}}

        <!-- Password -->
        {{-- <div class="mb-3"> --}}
        {{-- <label class="form-label">Password</label> --}}
        {{-- <input type="hidden" name="password" value="123456"
                            class="form-control @error('password') is-invalid @enderror">
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div> --}}

        <!-- Login Password -->
        {{-- <div class="mb-3"> --}}
        {{-- <label class="form-label">Confirm Password</label> --}}
        {{-- <input type="hidden" name="password_confirmation" value="123456"
                            class="form-control @error('password_confirmation') is-invalid @enderror">
                        @error('password_confirmation')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div> --}}

        <!-- Submit Button -->
        {{-- <button type="submit" class="btn btn-primary w-100">Register</button> --}}

        {{-- <div class="row mt-3">
                        <div class="col-12 text-center"><a href="{{ route('email_app_password') }}">How to Get App
                                Email</a>
                        </div>
                    </div>
                </form> --}}

        {{-- </div>
        </div> --}}
    </div>

@endsection