@extends('layouts.main')
@include('layouts.datatables')
@include('layouts.components.confirm-delete')

@section('title', $title)

@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">{{ $title }}</div>
                <div class="d-none">
                    @can('create', App\Models\EventSponsor::class)
                        <x-buttons.create-small name="event-sponsor" :route="route('event-sponsor.create')" />
                    @endcan
                    <a class="btn btn-sm btn-alt-info ms-2 me-2" id="btn-template-event-sponsor" href="{{ route('event-sponsor.csv-template') }}">
                        <i class="fa fa-download"></i> CSV Template
                    </a>
                    @can('create', App\Models\EventSponsor::class)
                        <button class="btn btn-sm btn-alt-primary " type="button" id="btn-import-event-sponsor" data-bs-toggle="modal" data-bs-target="#modal-import-event-sponsor">
                            <i class="fa fa-file-import"></i> Import CSV
                        </button>
                    @endcan
                    <x-buttons.refresh-small name="event-sponsor" />
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-sm table-hover table-striped align-middle" id="table-event-sponsor">
                        <thead>
                            <tr>
                                <th>{{ __('validation.attributes.company_name') }}</th>
                                <th>{{ __('validation.attributes.contact_person') }}</th>
                                <th>{{ __('validation.attributes.level') }}</th>
                                <th>{{ __('validation.attributes.status') }}</th>
                                <th>{{ __('module.event') }}</th>
                                <th>{{ __('validation.attributes.created_at') }}</th>
                                <th>{{ __('validation.attributes.updated_at') }}</th>
                                <th>{{ __('validation.attributes.action') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
    const table = $('#table-event-sponsor').DataTable({
        ajax: { url: '{{ route('datatable.event-sponsor-index') }}' },
        serverSide: true,
        order: [[0, 'asc']],
        columns: [
            { data: 'company_name', name: 'company_name' },
            { data: 'contact_person', name: 'contact_person' },
            { data: 'level', name: 'level' },
            { data: 'status', name: 'status' },
            { data: 'event', name: 'event.title', orderable: false },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        drawCallback: function() {
            $('button[data-delete-confirm="1"]').on('click', function() {
                deleteConfirm($(this).data('delete-route'), $(this).data('delete-id'), table)
            })
        },
        initComplete: function() {
            $('#datatable-toolbar2').prepend($('#btn-create-event-sponsor'));
            $('#datatable-toolbar2').prepend($('#btn-template-event-sponsor'));
            $('#datatable-toolbar2').prepend($('#btn-import-event-sponsor'));
            $('#datatable-toolbar3').prepend($('#btn-refresh-event-sponsor'));
        },
    });

    $('#btn-refresh-event-sponsor').on('click', function() {
        table.draw();
    });
</script>
@endpush

<div class="modal fade" id="modal-import-event-sponsor" tabindex="-1" aria-labelledby="modalImportEventSponsorLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('event-sponsor.import-csv') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="modalImportEventSponsorLabel">Import CSV - {{ __('module.event-sponsor') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        Download the template first, fill it, then upload here.
                    </div>
                    <x-forms.input-file name="file" label="CSV File" accept=".csv,.txt" required />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-alt-secondary" data-bs-dismiss="modal">{{ __('general.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-upload me-1"></i> {{ __('general.submit') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>