@extends('backend.manager.layouts.manager-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="gap-2 mb-3 d-flex justify-content-end">
                    <button type="button" class="btn btn-danger" id="filterReset">Clear filters</button>
                </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('store-manager.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();
            });
        }
    });

</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