@extends('admin.layouts.master')
@section('title', 'Marketing Coupons')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-soft: #eef2ff;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --bg-body: #f8fafc;
        }

        body {
            background-color: var(--bg-body);
            font-family: 'Inter', sans-serif;
            color: var(--text-main);
        }

        /* --- 1. Header & Grid --- */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .coupon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 1.5rem;
        }

        /* --- 2. The Modern Coupon Card --- */
        .coupon-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .coupon-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
            border-color: var(--primary-soft);
        }

        /* Status Stripe */
        .status-stripe {
            height: 6px;
            width: 100%;
            background: #e2e8f0;
        }

        .status-stripe.active {
            background: #10b981;
        }

        /* Green */
        .status-stripe.expired {
            background: #ef4444;
        }

        /* Red */
        .status-stripe.inactive {
            background: #94a3b8;
        }

        /* Gray */

        /* Card Body */
        .card-body {
            padding: 1.5rem;
            flex-grow: 1;
        }

        .discount-badge {
            background: var(--primary-soft);
            color: var(--primary);
            font-weight: 800;
            font-size: 1.5rem;
            line-height: 1;
            margin-bottom: 0.5rem;
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 12px;
        }

        .discount-sub {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* The "Ticket" Code */
        .code-container {
            margin: 1.2rem 0;
            background: #f8fafc;
            border: 2px dashed #cbd5e1;
            border-radius: 10px;
            padding: 0.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: 0.2s;
        }

        .code-container:hover {
            border-color: var(--primary);
            background: #fff;
        }

        .coupon-code {
            font-family: 'Courier New', monospace;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 1px;
            color: var(--text-main);
        }

        .copy-icon {
            color: #94a3b8;
            font-size: 1.1rem;
        }

        /* Usage Bar */
        .usage-section {
            margin-bottom: 1rem;
        }

        .usage-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 4px;
            font-weight: 600;
        }

        .progress {
            height: 6px;
            border-radius: 10px;
            background: #f1f5f9;
        }

        .progress-bar {
            background: var(--primary);
            border-radius: 10px;
        }

        /* Footer Actions */
        .card-footer-custom {
            padding: 1rem 1.5rem;
            border-top: 1px solid #f1f5f9;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .date-text {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .btn-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            background: transparent;
            transition: 0.2s;
        }

        .btn-icon:hover {
            background: #f8fafc;
            color: var(--text-main);
            border-color: #e2e8f0;
        }

        .btn-icon.edit:hover {
            color: var(--primary);
            background: var(--primary-soft);
            border-color: transparent;
        }

        .btn-icon.delete:hover {
            color: #ef4444;
            background: #fef2f2;
            border-color: transparent;
        }

        /* --- 3. Offcanvas Form --- */
        .offcanvas {
            width: 450px !important;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }

        .form-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 0.4rem;
        }

        .form-control,
        .form-select {
            padding: 0.7rem;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            font-size: 0.9rem;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-soft);
            outline: none;
        }

        .btn-save {
            background: var(--primary);
            color: white;
            width: 100%;
            padding: 0.8rem;
            border-radius: 12px;
            font-weight: 600;
            border: none;
            transition: 0.2s;
        }

        .btn-save:hover {
            background: #4338ca;
            transform: translateY(-1px);
        }

        .is-invalid {
            border-color: #ef4444 !important;
        }

        .error-msg {
            color: #ef4444;
            font-size: 0.8rem;
            margin-top: 4px;
            display: none;
        }
    </style>
@endpush

@section('content')
    @livewire('admin.marketing.coupons')
    <div class="offcanvas offcanvas-end" tabindex="-1" id="couponOffcanvas">
        <div class="offcanvas-header bg-white border-bottom">
            <h5 class="offcanvas-title fw-bold" id="offcanvasLabel">Create Coupon</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body bg-light">
            <form id="couponForm">
                @csrf
                <div id="methodField"></div>
                <input type="hidden" id="coupon_id">

                {{-- Form Fields --}}
                <div class="card p-3 border-0 shadow-sm mb-3">
                    <h6 class="fw-bold text-uppercase text-muted small mb-3">General</h6>
                    <div class="mb-3">
                        <label class="form-label">Code <span class="text-danger">*</span></label>
                        <input type="text" name="code" id="code" class="form-control text-uppercase fw-bold"
                            placeholder="SUMMER50">
                        <div class="error-msg"></div>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="description" class="form-control" rows="2"></textarea>
                    </div>
                </div>

                <div class="card p-3 border-0 shadow-sm mb-3">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label">Type</label>
                            <select name="type" id="type" class="form-select">
                                <option value="percentage">Percentage (%)</option>
                                <option value="fixed">Flat Amount (₹)</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Value <span class="text-danger">*</span></label>
                            <input type="number" name="value" id="value" class="form-control fw-bold text-success"
                                step="0.01">
                            <div class="error-msg"></div>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Min Cart (₹)</label>
                            <input type="number" name="min_booking_amount" id="min_booking_amount" class="form-control"
                                value="0">
                        </div>
                        <div class="col-6" id="max_cap_div">
                            <label class="form-label">Max Cap (₹)</label>
                            <input type="number" name="max_discount_amount" id="max_discount_amount" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="card p-3 border-0 shadow-sm mb-3">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label">Total Uses</label>
                            <input type="number" name="usage_limit" id="usage_limit" class="form-control" placeholder="∞">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Per User</label>
                            <input type="number" name="limit_per_user" id="limit_per_user" class="form-control"
                                placeholder="∞">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Start Date</label>
                            <input type="datetime-local" name="start_date" id="start_date" class="form-control">
                        </div>
                        <div class="col-6">
                            <label class="form-label">End Date</label>
                            <input type="datetime-local" name="end_date" id="end_date" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between mb-4 px-1">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" checked>
                        <label class="form-check-label fw-bold small">Active</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_new_user_only" id="is_new_user_only">
                        <label class="form-check-label fw-bold small">New Users Only</label>
                    </div>
                </div>

                <button type="submit" class="btn-save" id="saveBtn">Save Coupon</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        const offcanvas = new bootstrap.Offcanvas(document.getElementById('couponOffcanvas'));

        // --- 1. Open Create Modal ---
        window.openCreateModal = function() {
            $('#couponForm')[0].reset();
            $('#methodField').html('');
            $('#offcanvasLabel').text('Create Coupon');
            $('#saveBtn').text('Create Coupon');
            $('#couponForm').attr('action', "{{ route('admin.marketing.coupon.store') }}");
            offcanvas.show();
        }

        // --- 2. Open Edit Modal (Called from Livewire View) ---
        window.openEditModal = function(data) {
            $('#couponForm')[0].reset();
            $('#offcanvasLabel').text('Edit: ' + data.code);
            $('#saveBtn').text('Update Changes');

            // Populate Fields
            $('#code').val(data.code);
            $('#description').val(data.description);
            $('#type').val(data.type).trigger('change');
            $('#value').val(data.value);
            $('#min_booking_amount').val(data.min_booking_amount);
            $('#max_discount_amount').val(data.max_discount_amount);
            $('#usage_limit').val(data.usage_limit);
            $('#limit_per_user').val(data.limit_per_user);

            if (data.start_date) $('#start_date').val(data.start_date.slice(0, 16));
            if (data.end_date) $('#end_date').val(data.end_date.slice(0, 16));

            $('#is_active').prop('checked', data.is_active);
            $('#is_new_user_only').prop('checked', data.is_new_user_only);

            // Update Logic
            let url = "{{ route('admin.marketing.coupon.update', ':id') }}";
            $('#couponForm').attr('action', url.replace(':id', data.id));
            $('#methodField').html('<input type="hidden" name="_method" value="PUT">');

            offcanvas.show();
        }

        // --- 3. AJAX Submit ---
        $('#couponForm').on('submit', function(e) {
            e.preventDefault();
            let btn = $('#saveBtn');
            let originalText = btn.text();
            btn.prop('disabled', true).text('Saving...');
            $('.is-invalid').removeClass('is-invalid');
            $('.error-msg').hide();

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: new FormData(this),
                contentType: false,
                processData: false,
                success: function(res) {
                    btn.prop('disabled', false).text(originalText);
                    offcanvas.hide();

                    // *** MAGIC: Tell Livewire to Refresh ***
                    Livewire.dispatch('refresh-coupons');

                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: res.message,
                        timer: 1500,
                        showConfirmButton: false
                    });
                },
                error: function(err) {
                    btn.prop('disabled', false).text(originalText);
                    if (err.status === 422) {
                        $.each(err.responseJSON.errors, function(key, val) {
                            $('#' + key).addClass('is-invalid').siblings('.error-msg').text(val[
                                0]).show();
                        });
                    }
                }
            });
        });

        // --- 4. AJAX Delete (Called from Livewire View) ---
        window.confirmDelete = function(id) {
            Swal.fire({
                title: 'Delete?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                confirmButtonText: 'Yes, Delete'
            }).then((result) => {
                if (result.isConfirmed) {
                    let url = "{{ route('admin.marketing.coupon.delete', ':id') }}";
                    $.ajax({
                        url: url.replace(':id', id),
                        type: "POST",
                        data: {
                            _method: 'DELETE',
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(res) {
                            // *** MAGIC: Tell Livewire to Refresh ***
                            Livewire.dispatch('refresh-coupons');
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted',
                                timer: 1000,
                                showConfirmButton: false
                            });
                        }
                    });
                }
            });
        }

        // UI Helper
        $('#type').change(function() {
            if ($(this).val() === 'fixed') $('#max_cap_div').hide();
            else $('#max_cap_div').show();
        });
    </script>
@endpush