@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">
        @include('admin.layouts.notifications')

        <!-- Page Heading & Search Area -->
        <div class="row mb-3">
            <div class="col-md-9">
                <h4 class="c-grey-900">{{ $title }} <a class="btn btn-primary" href="{{ route('ch-admin.coupons.create') }}"><i class="ti-plus"></i></a></h4>
            </div>
            <div class="col-md-3">
                <form method="GET" action="{{ route('ch-admin.coupons.index') }}">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control" placeholder="Search…" aria-label="Search" value="{{ request('search') }}">
                        <button class="btn btn-info" type="submit"><i class="ti ti-search"></i></button>
                    </div>
                    <!-- Include current filter values as hidden inputs -->
                    <input type="hidden" name="type" value="{{ request('type') }}">
                    <input type="hidden" name="start_date" value="{{ request('start_date') }}">
                    <input type="hidden" name="end_date" value="{{ request('end_date') }}">
                    <input type="hidden" name="status" value="{{ request('status') }}">
                </form>
            </div>
        </div>

        <div class="row">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <!-- Filters Section -->
                <div class="row mb-3">
                    <form method="GET" action="{{ route('ch-admin.coupons.index') }}" class="d-flex align-items-center gap-3 w-100">
                        <!-- Filter by Type -->
                        <div class="flex-shrink-0">
                            <select name="type" class="form-control">
                                <option value="">All Types</option>
                                <option value="1" {{ request('type') == '1' ? 'selected' : '' }}>Fixed</option>
                                <option value="2" {{ request('type') == '2' ? 'selected' : '' }}>Percentage</option>
                            </select>
                        </div>

                        <!-- Filter by Start Date -->
                        <div class="flex-shrink-0">
                            <div class="d-flex align-items-center">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="date" name="start_date" id="start_date" class="form-control" value="{{ request('start_date') }}">
                            </div>
                        </div>

                        <!-- Filter by End Date -->
                        <div class="flex-shrink-0">
                            <div class="d-flex align-items-center">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="date" name="end_date" id="end_date" class="form-control" value="{{ request('end_date') }}">
                            </div>
                        </div>

                        <!-- Filter by Status -->
                        <div class="flex-shrink-0">
                            <select name="status" class="form-control">
                                <option value="">All Statuses</option>
                                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Expired</option>
                            </select>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex-shrink-0">
                            <button class="btn btn-info">Apply Filters</button>
                            @if(request('type') || request('start_date') || request('end_date') || request('status'))
                                <a href="{{ route('ch-admin.coupons.index') }}" class="btn btn-secondary">Reset</a>
                            @endif
                            <button class="btn btn-danger" id="delete-bulk-btn" type="button"><i class="fa fa-solid fa-trash"></i> Delete</button>
                        </div>
                        <input type="hidden" name="search" value="{{ request('search') }}">
                    </form>
                </div>

                <!-- Coupons Table -->
                <div class="row">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all" class="form-check-input"></th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Type</th>
                            <th>Used</th>
                            <th>Date</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($coupons as $coupon)
                            <tr>
                                <td><input type="checkbox" class="form-check-input select-coupon" value="{{ $coupon->id }}"></td>
                                <th scope="row">{{ $coupon->id }}</th>
                                <td><a href="{{ route('ch-admin.coupons.edit', [$coupon->id]) }}">{{ $coupon->name }}</a>
                                </td>
                                <td>{{ $coupon->code }}</td>
                                <td>
                                    @if ($coupon->type == 1)
                                        <span class="badge bg-primary">Fixed</span>
                                    @elseif ($coupon->type == 2)
                                        <span class="badge bg-success">Percentage</span>
                                    @endif
                                </td>
                                <td>{{ $coupon->max_uses }}</td>
                                <td>{{ \Carbon\Carbon::parse($coupon->start_date)->format('M d, Y') }} - {{ \Carbon\Carbon::parse($coupon->end_date)->format('M d, Y') }}</td>
                                <td>
                                    @if (\Carbon\Carbon::now()->gt(\Carbon\Carbon::parse($coupon->end_date)))
                                        <span class="badge bg-danger">Expired</span>
                                    @else
                                        <span class="badge bg-success">Active</span>
                                    @endif
                                </td>
                                <td class="d-flex flex-row">
                                    <a class="btn btn-sm btn-primary me-2" href="{{ route('ch-admin.coupons.edit', [$coupon->id]) }}"><i class="fa fa-solid fa-pencil"></i></a>
                                    <form method="POST" action="{{ route('ch-admin.coupons.destroy', $coupon->id) }}" onsubmit="return confirm('Are you sure you want to delete this coupon?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-solid fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center">No coupons available.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>

                    @if($coupons->hasPages())
                        <div class="mt-4">
                            {{ $coupons->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{url('assets/custom/js/axios.min.js')}}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const selectAllCheckbox = document.getElementById('select-all');
            const couponCheckboxes = document.querySelectorAll('.select-coupon');
            const deleteBulkBtn = document.getElementById('delete-bulk-btn');

            selectAllCheckbox.addEventListener('click', function () {
                const isChecked = this.checked;
                couponCheckboxes.forEach(checkbox => checkbox.checked = isChecked);
                toggleDeleteButton();
            });

            couponCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('click', function () {
                    selectAllCheckbox.checked = [...couponCheckboxes].every(checkbox => checkbox.checked);
                    toggleDeleteButton();
                });
            });

            deleteBulkBtn.addEventListener('click', function () {
                const selectedCoupons = getSelectedCoupons();

                if (selectedCoupons.length === 0) {
                    alert('Please select at least one coupon.');
                    return;
                }

                if (!confirm('Are you sure you want to delete the selected coupons?')) {
                    return;
                }

                httpClient.delete('{{ route("ch-admin.coupons.bulk.destroy") }}', {
                    data: {
                        coupon_ids: selectedCoupons,
                    }
                })
                    .then((response) => {
                        if (response.data.success) {
                            window.location.href = '{{ route("ch-admin.coupons.index") }}';
                        } else {
                            alert('Failed to delete coupons.');
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                        alert('An error occurred. Please try again.');
                    });
            });

            function toggleDeleteButton() {
                deleteBulkBtn.style.display = [...couponCheckboxes].some(checkbox => checkbox.checked) ? 'inline-block' : 'none';
            }

            function getSelectedCoupons() {
                return [...document.querySelectorAll('.select-coupon:checked')].map(checkbox => checkbox.value);
            }

            toggleDeleteButton();
        });
    </script>
@endpush