@extends('backend.app')

@section('title', 'Ticket Invoices')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Ticket Invoices</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">Ticket Invoices</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row g-3 align-items-end mb-3">
                    <div class="col-md-4">
                        <label class="form-label" for="filterRaffle">Raffle</label>
                        <select class="form-select js-raffle-select" id="filterRaffle">
                            <option value="">All raffles</option>
                            @foreach ($raffles as $raffle)
                                <option value="{{ $raffle->id }}">
                                    {{ $raffle->property?->title ?? 'Raffle #' . $raffle->id }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterDateFrom">Raffle date from</label>
                        <input type="date" class="form-control" id="filterDateFrom">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterDateTo">Raffle date to</label>
                        <input type="date" class="form-control" id="filterDateTo">
                    </div>
                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-danger" id="filterReset">Clear filters</button>
                    </div>
                </div>

                <div class="row g-3 align-items-end mb-3">
                    <div class="col-md-3">
                        <label class="form-label" for="filterUserName">User name</label>
                        <input type="text" class="form-control" id="filterUserName" placeholder="Search name">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterUserEmail">User email</label>
                        <input type="text" class="form-control" id="filterUserEmail" placeholder="Search email">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" for="filterWinningTicket">Winning Ticket</label>
                        <input type="text" class="form-control" id="filterWinningTicket" placeholder="Search ticket number">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" for="filterUserPhone">User phone</label>
                        <input type="text" class="form-control" id="filterUserPhone" placeholder="Search phone">
                    </div>
                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-primary" id="filterApply">Apply filters</button>
                    </div>
                    
                </div>


                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Ticket Number</th>
                                <th>Participant</th>
                                <th>Raffle</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Purchased</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <small class="text-muted d-block mt-2">Use the search box to look up a ticket number or participant.</small>
            </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 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-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
                ajax: {
                    url: "{{ route('admin.invoice.index') }}",
                    type: "GET",
                    data: function (d) {
                        d.raffle_id = $('#filterRaffle').val();
                        d.raffle_date_from = $('#filterDateFrom').val();
                        d.raffle_date_to = $('#filterDateTo').val();
                        d.user_name = $('#filterUserName').val();
                        d.user_email = $('#filterUserEmail').val();
                        d.winning_ticket = $('#filterWinningTicket').val();
                        d.user_phone = $('#filterUserPhone').val();
                    },
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'ticket_number', name: 'ticket_number' },
                    { data: 'participant', name: 'participant', orderable: false },
                    { data: 'raffle', name: 'raffle', orderable: false },
                    { data: 'amount', name: 'amount', orderable: false, searchable: false },
                    { data: 'transaction_status', name: 'transaction_status', orderable: false, searchable: false },
                    { data: 'purchased_at', name: 'purchased_at' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
            });

            $('.js-raffle-select').select2({
                width: '100%',
                placeholder: 'All raffles',
                allowClear: true
            });

            $('#filterRaffle, #filterDateFrom, #filterDateTo').on('change', function () {
                table.ajax.reload();
            });

            $('#filterUserName, #filterUserEmail, #filterUserPhone, #filterWinningTicket').on('keyup', function () {
                table.ajax.reload();
            });

            $('#filterReset').on('click', function () {
                $('#filterRaffle').val('').trigger('change');
                $('#filterDateFrom').val('');
                $('#filterDateTo').val('');
                $('#filterUserName').val('');
                $('#filterUserEmail').val('');
                $('#filterUserPhone').val('');
                $('#filterWinningTicket').val('');
                table.ajax.reload();
            });
        }
    });
</script>
@endpush

@push('style')
<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        padding: 0.375rem 0.75rem;
        display: flex;
        align-items: center;
        background-color: #fff;
    }

    .select2-container .select2-selection__rendered {
        padding: 0;
        line-height: 1.5;
        color: #212529;
    }

    .select2-container .select2-selection__placeholder {
        color: #6c757d;
    }

    .select2-container .select2-selection__arrow {
        height: 36px;
        right: 6px;
    }

    .select2-container--default .select2-selection--single .select2-selection__clear {
        margin-right: 6px;
        font-size: 16px;
    }

    .select2-container--default .select2-results__option {
        padding: 8px 12px;
        font-size: 14px;
    }
</style>
@endpush