@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('clinic.bookings.title') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard.clinic.home') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('clinic.bookings.title') }}</li>
            </ul>
        </div>
        @can('clinic.bookings.create')
            <a href="{{ route('admin.dashboard.clinic.bookings.create') }}" class="btn btn-sm btn-primary"><i class="bi bi-calendar-plus"></i>{{ trans('clinic.bookings.add') }}</a>
        @endcan
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        @if (session('success'))
            <div class="alert alert-success mb-5">{{ session('success') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger mb-5">{{ $errors->first() }}</div>
        @endif

        <div class="card card-flush">
            <div class="card-header border-0 pt-6 align-items-center">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1">
                        <i class="bi bi-search fs-5 position-absolute ms-4 text-muted"></i>
                        <input type="text" id="tableSearch" class="form-control form-control-solid w-250px ps-12" placeholder="{{ trans('clinic.bookings.search_placeholder') }}">
                    </div>
                </div>
                <div class="card-toolbar gap-3 flex-wrap">
                    <input type="date" class="form-control form-control-solid form-control-sm w-150px" data-filter="date" value="{{ $filters['date'] ?? '' }}" title="{{ trans('clinic.bookings.date') }}">
                    <select class="form-select form-select-solid form-select-sm w-150px" data-filter="status">
                        <option value="">{{ trans('clinic.bookings.all_statuses') }}</option>
                        @foreach (['pending', 'confirmed', 'completed', 'cancelled'] as $option)
                            <option value="{{ $option }}" @selected(($filters['status'] ?? null) === $option)>{{ trans('clinic.bookings.statuses.' . $option) }}</option>
                        @endforeach
                    </select>
                    <select class="form-select form-select-solid form-select-sm w-150px" data-filter="type">
                        <option value="">{{ trans('clinic.doctors.all_types') }}</option>
                        @foreach (['visit', 'online', 'followup'] as $option)
                            <option value="{{ $option }}" @selected(($filters['type'] ?? null) === $option)>{{ trans('clinic.bookings.' . $option) }}</option>
                        @endforeach
                    </select>
                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="doctor_id">
                        <option value="">{{ trans('clinic.bookings.all_doctors') }}</option>
                        @foreach ($doctors as $doctor)
                            <option value="{{ $doctor->id }}" @selected((int) ($filters['doctor_id'] ?? 0) === $doctor->id)>{{ $doctor->name }}</option>
                        @endforeach
                    </select>
                    <button type="button" class="btn btn-sm btn-light" id="clearFilters">{{ trans('clinic.bookings.clear_filters') }}</button>
                </div>
            </div>
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-4 w-100" id="bookingsTable">
                    <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th>#</th>
                        <th>{{ trans('clinic.bookings.date') }}</th>
                        <th class="min-w-150px">{{ trans('clinic.bookings.patient') }}</th>
                        <th class="min-w-150px">{{ trans('clinic.doctors.title') }}</th>
                        <th>{{ trans('clinic.clinics.title') }}</th>
                        <th>{{ trans('clinic.bookings.type') }}</th>
                        <th>{{ trans('clinic.doctors.price') }}</th>
                        <th>{{ trans('clinic.bookings.payment') }}</th>
                        <th>{{ trans('clinic.bookings.status') }}</th>
                        <th class="text-end min-w-125px">{{ trans('clinic.common.actions') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('dashboard.admin.partials.crud-table-js')
    @include('dashboard.admin.partials.server-table', [
        'tableId' => 'bookingsTable',
        'url' => route('admin.dashboard.clinic.bookings.index'),
        'columns' => [
            ['data' => 'id', 'name' => 'clinic_bookings.id', 'searchable' => false],
            ['data' => 'scheduled_at', 'name' => 'scheduled_at', 'searchable' => false],
            ['data' => 'patient', 'name' => 'patient', 'orderable' => false],
            ['data' => 'doctor', 'name' => 'doctor', 'orderable' => false, 'searchable' => false],
            ['data' => 'clinic', 'name' => 'clinic', 'orderable' => false, 'searchable' => false],
            ['data' => 'type', 'name' => 'type', 'searchable' => false],
            ['data' => 'price', 'name' => 'price', 'searchable' => false],
            ['data' => 'payment', 'name' => 'payment', 'orderable' => false, 'searchable' => false],
            ['data' => 'status', 'name' => 'status', 'searchable' => false],
            ['data' => 'action', 'name' => 'action', 'orderable' => false, 'searchable' => false],
        ],
        'order' => [[1, 'desc']],
    ])
    <script>
        $(function () {
            var $card = $('#bookingsTable').closest('.card');

            $('#clearFilters').on('click', function () {
                $card.find('[data-filter]').val('');
                window.ServerTables.bookingsTable.ajax.reload();
            });

            $('#bookingsTable').on('submit', 'form[data-confirm-action]', function (event) {
                var form = this;
                if (form.dataset.confirmed) { return; }
                event.preventDefault();
                Swal.fire({
                    text: form.dataset.confirmAction, icon: 'question', showCancelButton: true, buttonsStyling: false,
                    confirmButtonText: @json(trans('clinic.bookings.confirm')), cancelButtonText: @json(trans('dash_site.Cancel')),
                    customClass: {confirmButton: 'btn btn-success', cancelButton: 'btn btn-light'}
                }).then(function (result) {
                    if (result.isConfirmed) { form.dataset.confirmed = '1'; form.submit(); }
                });
            });

            // Cancelling asks for an optional reason, sent with the form.
            $('#bookingsTable').on('submit', 'form[data-cancel-booking]', function (event) {
                var form = this;
                if (form.dataset.confirmed) { return; }
                event.preventDefault();
                Swal.fire({
                    title: @json(trans('clinic.bookings.cancel_question')),
                    input: 'text',
                    inputPlaceholder: @json(trans('clinic.bookings.cancel_reason_placeholder')),
                    icon: 'warning', showCancelButton: true, buttonsStyling: false,
                    confirmButtonText: @json(trans('clinic.bookings.cancel')), cancelButtonText: @json(trans('dash_site.close')),
                    customClass: {confirmButton: 'btn btn-danger', cancelButton: 'btn btn-light'}
                }).then(function (result) {
                    if (result.isConfirmed) {
                        form.querySelector('[name="reason"]').value = result.value || '';
                        form.dataset.confirmed = '1';
                        form.submit();
                    }
                });
            });
        });
    </script>
@endsection