@extends('layouts.admin.index')

@section('content')
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </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

@if ($errors->any())
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="container mt-4">
    <h4 class="fw-bold mb-4">Send Event / Promotion Notification</h4>

    {{-- Filtering Form --}}
    <form method="GET" action="{{ route('admin.email.form') }}" id="filterForm">
        <div class="row mb-4">
            <div class="mb-4">
                <br>
                <label><strong>Target Audience</strong></label>
                <select id="audience" class="form-control" name="audience" required>
                    <option value="">--Please choose--</option>
                    <option value="all" {{ request('audience') == 'all' ? 'selected' : '' }}>All users (General Combo)</option>
                    <option value="specific" {{ request('audience') == 'specific' ? 'selected' : '' }}>Specific users (Birthday Combo)</option>
                </select>
            </div>
            <div class="mb-4" id="monthSelector" style="display: none;">
                <label><strong>Select Birthday Month</strong></label>
                <select name="birth_month" class="form-control">
                    <option value="">Please choose a month</option>
                    @foreach(range(1, 12) as $m)
                        <option value="{{ $m }}" {{ request('birth_month') == $m ? 'selected' : '' }}>
                            {{ DateTime::createFromFormat('!m', $m)->format('F') }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
    </form>

    @if($customers->count())

    {{-- Email Template Preview Section --}}
    <div class="mb-4">
        <h5 class="fw-bold">Email Template Examples</h5>
        <div class="row">
            <div class="col-md-6 text-center">
                <p class="fw-semibold">General Combo</p>
                <img src="{{ asset('email-template/general_template.png') }}"
                    alt="General Template"
                    class="img-fluid border rounded shadow-sm template-img"
                    style="max-height: 300px; cursor: pointer;"
                    data-bs-toggle="modal"
                    data-bs-target="#imageModal"
                    data-img="{{ asset('email-template/general_template.png') }}">
            </div>
            <div class="col-md-6 text-center">
                <p class="fw-semibold">Birthday Combo</p>
                <img src="{{ asset('email-template/birthday_template.png') }}"
                    alt="Birthday Template"
                    class="img-fluid border rounded shadow-sm template-img"
                    style="max-height: 300px; cursor: pointer;"
                    data-bs-toggle="modal"
                    data-bs-target="#imageModal"
                    data-img="{{ asset('email-template/birthday_template.png') }}">
            </div>
        </div>
    </div>

    {{-- Bootstrap Modal for Image Preview --}}
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <img id="modalImage" src="" alt="Template Preview" class="img-fluid rounded">
                </div>
            </div>
        </div>
    </div>

    {{-- Script to load clicked image into modal --}}
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll('.template-img').forEach(img => {
            img.addEventListener('click', function () {
                document.getElementById('modalImage').src = this.dataset.img;
            });
        });
    });
    </script>

    <form action="{{ route('admin.email.send') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <label><strong>Customers with Email</strong><br><br> </label>

        <div class="alert alert-info">
            Kindly select customers' email first before filling out the form.
        </div>
        <br>
        <div class="table-responsive">
            <table id="customerTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all"> Select All</th>
                        <th>No.</th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($customers as $index => $customer)
                        <tr>
                            <td>
                                <input class="customer-checkbox" type="checkbox" name="emails[]" value="{{ $customer->email }}">
                            </td>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ ($customer->firstName ?? '') . ' ' . ($customer->lastName ?? '') }}</td>
                            <td>{{ $customer->email }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div id="pagination" class="mt-3"></div>
@else
    <p>No customers found.</p>
@endif

{{-- <br><br>
<div class="mb-3">
        <input type="checkbox" class="form-check-input" id="confirmSelect" required>
        <label class="form-check-label" for="confirmSelect">
            Please select the emails first before filling and submitting the form.
        </label>
</div> --}}
{{-- Email Details Form Section --}}
<br><br>
@if($customers->count())
    <div class="mb-3">
        <label for="title" class="form-label"><strong>Title</strong></label>
        <input type="text" class="form-control" name="title" id="title" placeholder="Enter title..." required>
    </div>

    <div class="mb-3">
        <label for="desc" class="form-label"><strong>Description</strong></label>
        <textarea class="form-control" name="desc" id="desc" rows="4" placeholder="Write your message..." required></textarea>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label for="start_date" class="form-label"><strong>Start Date</strong></label>
            <input type="date" class="form-control" name="start_date" id="start_date" required>
        </div>
        <div class="col-md-6">
            <label for="end_date" class="form-label"><strong>End Date</strong></label>
            <input type="date" class="form-control" name="end_date" id="end_date" required>
        </div>
    </div>

    <div class="mb-3">
        <label for="image" class="form-label"><strong>Upload Image</strong></label>
        <input type="file" class="form-control" name="image" id="image" accept="image/*" required>
        <small class="text-muted d-block mt-1">
            📌 Image must not exceed <strong>1MB</strong> and should be <strong>2000x1333px</strong>.
        </small>
    </div>

    <div class="mb-3">
        <label for="remark" class="form-label"><strong>Remark</strong></label>
        <textarea class="form-control" name="remark" id="remark" rows="3" placeholder="Any additional remark..."></textarea>
    </div>

    <input type="hidden" name="audience" value="{{ request('audience') }}">
    <input type="hidden" name="birth_month" value="{{ request('birth_month') }}">

    <button type="submit" class="btn btn-primary">Send Notification</button>

</form>
@endif



{{-- Scripts --}}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const audienceSelect = document.getElementById('audience');
        const monthSelector = document.getElementById('monthSelector');

        function toggleMonth() {
            monthSelector.style.display = (audienceSelect.value === 'specific') ? 'block' : 'none';
        }

        toggleMonth();
        audienceSelect.addEventListener('change', () => document.getElementById('filterForm').submit());
        document.querySelector('select[name="birth_month"]').addEventListener('change', () => document.getElementById('filterForm').submit());

        // Pagination logic
        const rowsPerPage = 15;
        const table = document.getElementById("customerTable");
        if (table) {
            const tbody = table.querySelector("tbody");
            const rows = tbody.querySelectorAll("tr");
            const pagination = document.getElementById("pagination");

            function displayTablePage(page) {
                const start = (page - 1) * rowsPerPage;
                const end = start + rowsPerPage;

                rows.forEach((row, index) => {
                    row.style.display = (index >= start && index < end) ? "" : "none";
                });
            }

            function setupPagination() {
                const pageCount = Math.ceil(rows.length / rowsPerPage);
                pagination.innerHTML = "";

                for (let i = 1; i <= pageCount; i++) {
                    const btn = document.createElement("button");
                    btn.textContent = i;
                    btn.setAttribute("type", "button"); // 🔒 Prevent default submit behavior
                    btn.classList.add("btn", "btn-sm", "btn-outline-primary", "me-1");
                    btn.addEventListener("click", function () {
                        displayTablePage(i);
                        document.querySelectorAll("#pagination button").forEach(b => b.classList.remove("active"));
                        btn.classList.add("active");
                    });

                    pagination.appendChild(btn);
                }

                if (pagination.firstChild) pagination.firstChild.classList.add("active");
            }

            if (rows.length > 0) {
                setupPagination();
                displayTablePage(1);
            }
        }
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const selectAllCheckbox = document.getElementById('select-all');
        const customerCheckboxes = document.querySelectorAll('.customer-checkbox');
        const selectAllHidden = document.getElementById('select-all-hidden');

        // "Select All" only for current page
        selectAllCheckbox.addEventListener('change', function () {
            const visibleCheckboxes = Array.from(customerCheckboxes).filter(cb => cb.closest('tr').style.display !== 'none');
            visibleCheckboxes.forEach(cb => cb.checked = this.checked);
            selectAllHidden.value = this.checked ? '1' : '0';
        });
    });
</script>
@endsection