@extends('backend.app')

@section('title', 'Raffle List')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Raffle List</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Raffles</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-end gap-2 mb-3">
                    <button type="button" class="btn btn-danger" id="filterReset">Clear filters</button>
                    <a href="{{ route('admin.raffle.create') }}" class="btn btn-primary">Add Raffle</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Property</th>
                                <th>Status</th>
                                <th>Start</th>
                                <th>Draw</th>
                                <th>Deadline</th>
                                <th>Tickets Sold</th>
                                <th>Max Tickets</th>
                                <th>Ticket Price</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="releaseFundsModal" tabindex="-1" aria-labelledby="releaseFundsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="releaseFundsModalLabel">Release Funds</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="releaseInfoLoader" class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div id="releaseInfo" style="display: none;">
                    <p><strong>Total Tickets Sold:</strong> <span id="totalTickets"></span></p>
                    <p><strong>Ticket Price:</strong> $<span id="ticketPrice"></span></p>
                    <p><strong>Total Revenue:</strong> $<span id="totalRevenue"></span></p>
                    <hr>
                    <p><strong>Admin Commission (98%):</strong> $<span id="adminCommission"></span></p>
                    <p><strong>Agent Payout (2%):</strong> $<span id="agentPayout"></span></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="confirmReleaseBtn">Release Funds</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            }
        });

        if (!$.fn.DataTable.isDataTable('#datatable')) {
            const clientTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            if (!document.cookie.match(/(?:^|; )timezone=/)) {
                document.cookie = 'timezone=' + encodeURIComponent(clientTimezone) + '; path=/';
            }

            const table = $('#datatable').DataTable({
                order: [],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                processing: true,
                responsive: true,
                serverSide: true,
                paging: true,
                language: {
                    processing: `<div class="text-center">
                        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>`
                },
                pagingType: "full_numbers",
                dom: "<'row justify-content-between table-topbar'<'col-md-3 col-sm-6 px-0'f><'col-md-2 col-sm-4 px-0'l>>tipr",
                ajax: {
                    url: "{{ route('admin.raffle.index') }}",
                    type: "GET",
                    data: function (data) {
                        data.timezone = clientTimezone;
                    },
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'property_title', name: 'property_title', orderable: false },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'start_date', name: 'start_date' },
                    { data: 'draw_date', name: 'draw_date' },
                    { data: 'dead_line', name: 'dead_line' },
                    { data: 'tickets_sold', name: 'tickets_sold' },
                    { data: 'max_tickets', name: 'max_tickets' },
                    { data: 'ticket_price', name: 'ticket_price' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
            });

            $('#filterReset').on('click', function () {
                $('#datatable_filter input').val('');
                table.search('');
                table.columns().search('');
                table.draw();
            });
        }
    });

    function showDeleteConfirm(id) {
        event.preventDefault();

        Swal.fire({
            title: 'Are you sure you want to delete?',
            text: 'If you delete this, it will be gone forever.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
        }).then((result) => {
            if (result.isConfirmed) {
                deleteItem(id);
            }
        });
    }

    function deleteItem(id) {
        let url = '{{ route('admin.raffle.destroy', ':id') }}';
        let csrfToken = '{{ csrf_token() }}';

        $.ajax({
            type: "DELETE",
            url: url.replace(':id', id),
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function (resp) {
                $('#datatable').DataTable().ajax.reload();
                if (resp.success) {
                    toastr.success(resp.message);
                } else {
                    toastr.error(resp.message);
                }
            },
            error: function () {
                toastr.error('An error occurred. Please try again.');
            }
        });
    }

    // Status change popup handler
    const statusOptions = [
        { value: 'pending',     label: 'Pending',     color: '#E1712B', icon: '⏳' },
        { value: 'upcoming',    label: 'Upcoming',    color: '#6c757d', icon: '📅' },
        { value: 'in_progress', label: 'In Progress', color: '#0d6efd', icon: '🔄' },
        { value: 'completed',   label: 'Completed',   color: '#4CAF50', icon: '✅' },
    ];

    $(document).on('click', '.raffle-status-badge', function () {
        let badge = $(this);
        let raffleId = badge.data('id');
        let currentStatus = badge.data('status');

        // Build the HTML for status option buttons
        let buttonsHtml = '<div style="display:flex;flex-direction:column;gap:10px;margin-top:8px;">';
        statusOptions.forEach(function (opt) {
            let isActive = opt.value === currentStatus;
            let outline = isActive ? 'outline:3px solid ' + opt.color + ';outline-offset:2px;' : '';
            let opacity = isActive ? 'opacity:0.7;' : '';
            buttonsHtml += '<button type="button" class="swal-status-btn" data-value="' + opt.value + '" ' +
                'style="background:' + opt.color + ';color:#fff;border:none;padding:12px 20px;border-radius:8px;' +
                'font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;' + outline + opacity +
                'display:flex;align-items:center;justify-content:center;gap:8px;">' +
                '<span style="font-size:18px;">' + opt.icon + '</span> ' + opt.label +
                (isActive ? ' <span style="font-size:12px;opacity:0.8;">(current)</span>' : '') +
                '</button>';
        });
        buttonsHtml += '</div>';

        Swal.fire({
            title: 'Change Raffle Status',
            html: buttonsHtml,
            showConfirmButton: false,
            showCancelButton: true,
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#6c757d',
            customClass: {
                popup: 'swal-status-popup'
            },
            didOpen: function () {
                // Hover effect
                document.querySelectorAll('.swal-status-btn').forEach(function (btn) {
                    btn.addEventListener('mouseenter', function () {
                        if (this.dataset.value !== currentStatus) {
                            this.style.transform = 'scale(1.03)';
                            this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                        }
                    });
                    btn.addEventListener('mouseleave', function () {
                        this.style.transform = 'scale(1)';
                        this.style.boxShadow = 'none';
                    });
                    btn.addEventListener('click', function () {
                        let newStatus = this.dataset.value;
                        if (newStatus === currentStatus) {
                            Swal.close();
                            return;
                        }
                        updateRaffleStatus(raffleId, newStatus);
                        Swal.close();
                    });
                });
            }
        });
    });

    function updateRaffleStatus(raffleId, newStatus) {
        let statusUrl = '{{ route('admin.raffle.status', ':id') }}'.replace(':id', raffleId);

        $.ajax({
            type: 'PATCH',
            url: statusUrl,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { status: newStatus },
            success: function (resp) {
                if (resp.success) {
                    toastr.success(resp.message);
                    $('#datatable').DataTable().ajax.reload(null, false);
                } else {
                    toastr.error(resp.message);
                }
            },
            error: function () {
                toastr.error('Failed to update status. Please try again.');
            }
        });
    }

    let raffleId, agentId;

    $(document).on('click', '.release-funds-btn', function () {
        raffleId = $(this).data('raffle-id');
        agentId = $(this).data('agent-id');

        $('#releaseFundsModal').modal('show');
        $('#releaseInfo').hide();
        $('#releaseInfoLoader').show();

        $.ajax({
            url: '{{ route('admin.stripe.release_info') }}',
            type: 'GET',
            data: {
                raffle_id: raffleId,
                agent_id: agentId
            },
            success: function (response) {
                $('#totalTickets').text(response.total_tickets);
                $('#ticketPrice').text(response.ticket_price);
                $('#totalRevenue').text(response.total_revenue);
                $('#adminCommission').text(response.admin_commission);
                $('#agentPayout').text(response.agent_payout);

                $('#releaseInfoLoader').hide();
                $('#releaseInfo').show();
            },
            error: function () {
                toastr.error('Failed to fetch release information.');
                $('#releaseFundsModal').modal('hide');
            }
        });
    });

    $('#confirmReleaseBtn').on('click', function () {
        $(this).prop('disabled', true).text('Releasing...');

        $.ajax({
            url: '{{ route('admin.stripe.release_funds') }}',
            type: 'POST',
            data: {
                raffle_id: raffleId,
                agent_id: agentId,
                _token: '{{ csrf_token() }}'
            },
            success: function (response) {
                if (response.success) {
                    toastr.success(response.message);
                    $('#releaseFundsModal').modal('hide');
                } else {
                    toastr.error(response.message);
                }
            },
            error: function (xhr) {
                let errorMsg = 'An error occurred while releasing funds.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                toastr.error(errorMsg);
            },
            complete: function () {
                $('#confirmReleaseBtn').prop('disabled', false).text('Release Funds');
            }
        });
    });
</script>
@endpush

@push('style')
<style>
    .table-topbar .dataTables_filter {
        text-align: left !important;
        width: 100%;
    }

    .table-topbar .dataTables_filter label {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .table-topbar .dataTables_filter input {
        width: 100% !important;
        min-width: 260px;
        height: 44px;
        padding: 8px 12px;
        border-radius: 0.5rem;
        font-size: 15px;
    }

    .raffle-status-badge:hover {
        opacity: 0.85 !important;
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: all 0.2s ease;
    }
</style>
@endpush