@extends('layouts.commonmaster')

@section('title') | View Event @endsection

@push('styles')
<style>
.highlight-row {
background-color: #f0ad4e;
color: white;
}
</style>
@endpush

@section('content')

<div class="page-body">
    <div class="container-xl">
        <div class="row mb-2">
            <div class="row row-cards">
                <div class="col-md-4">
                    <div class="card"  style="background-image: url('{{ asset('storage/' . $event->event_banner_file) }}'); background-size: cover;background-repeat: no-repeat;background-position: center center;">
                        <div class="card-body">
                            <div class="subheader text-white">Event Name</div>
                            <div class="h3 m-0 text-white">{{ $event->event_name }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="subheader">Event Name</div>
                            <div class="h3 m-0">{{ $event->event_name }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="subheader">Venue Name</div>
                            <div class="h3 m-0">{{ $event->venue_name }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="subheader">Venue Address</div>
                            <div class="h3 m-0">{{ $event->venue_address }}</div>
                        </div>
                    </div>
                </div>
            </div>


            <input id="eventID" style="display: none;" value="{{ $event->id }}">

        </div>

        <div class="row mt-3">
            <div class="col-lg-10 col-md-12">
                <table id="grid1b"></table>
            </div>
        </div>
    </div>
</div>

@endsection()

@push('scripts')

<script>
$(document).ready(function () {
    var eventId = $('#eventID').val();

    var grid = $("#grid1b").jqGrid({
        url: '/ticketier/get_event_tickets/' + eventId,
        datatype: 'json',
        mtype: 'GET',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "id",
        },
        colModel: [
            { name: "client_name", label: "Client", width: 200, align: "center", searchoptions: { sopt: ["ne", "cn", "eq"] } },
            { name: "created_at", label: "Date", width: 150, align: "center", sorttype: "date", formatter: "date", formatoptions: { newformat: "d-M-Y" },
                searchoptions: {
                    sopt: ["eq"],
                    dataInit: function (elem, options) {
                        var self = this, $elem = $(elem);
                        setTimeout(function () {
                            $elem.datepicker({
                                dateFormat: "dd-M-yy",
                                autoSize: true,
                                changeYear: true,
                                changeMonth: true,
                                showButtonPanel: true,
                                showWeek: true,
                                onSelect: function () {
                                    self.triggerToolbar(); // Trigger the search when a date is selected
                                }
                            });
                        }, 50);
                    }
                }
            },
            { name: "payment_amount", label: "Payment Amount", width: 190, template: "number", align: "center", searchoptions: { sopt: ["ne", "gt", "lt", "eq"] } },
            { name: "payment_method", label: "Payment Method", width: 150, align: "center", searchoptions: { sopt: ["ne", "cn", "eq"]  } },
            { name: "mpesa_transaction_id", label: "Transaction ID", width: 150, align: "center", searchoptions: { sopt: ["ne", "cn", "eq"] } },
            { name: "ticket_code", label: "Ticket Code", width: 200, align: "center", searchoptions: { sopt: ["ne", "cn", "eq"]  } },
            { name: "ticket_type", label: "Ticket Type", width: 200, align: "center", searchoptions: { sopt: ["ne", "cn", "eq"]  } }
        ],
        caption: "Event Tickets",
        height: 'auto',
        rowNum: 20,
        viewrecords: true,
        pager: true,
    }).jqGrid("filterToolbar", { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

    $("#grid1b").on("click", "tr.jqgrow", function () {
        $("#grid1b .jqgrow").removeClass("highlight-row");
        $(this).addClass("highlight-row");
    });
});
</script>

@endpush