@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.medicine_orders.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.medicine_orders.title') }}</li>
            </ul>
        </div>
        @can('clinic.medicine_orders.create')
            <a href="{{ route('admin.dashboard.clinic.medicine-orders.create') }}" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg"></i>{{ trans('clinic.medicine_orders.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

        <div class="row g-5 mb-7">
            @foreach (\App\Models\Clinic\MedicineOrder::STATUSES as $status)
                @php($color = \App\Models\Clinic\MedicineOrder::STATUS_COLORS[$status])
                <div class="col-md-4">
                    <a href="#" class="card card-flush h-100 hover-elevate-up" data-status-card="{{ $status }}">
                        <div class="card-body d-flex align-items-center py-6">
                            <span class="symbol symbol-50px me-5"><span class="symbol-label bg-light-{{ $color }}"><i class="ki-duotone {{ ['pending' => 'ki-time', 'prepared' => 'ki-capsule', 'delivered' => 'ki-delivery'][$status] }} fs-2x text-{{ $color }}">@for ($p = 1; $p <= 5; $p++)<span class="path{{ $p }}"></span>@endfor</i></span></span>
                            <div>
                                <div class="fs-2hx fw-bold text-gray-900 lh-1">{{ (int) ($counts[$status] ?? 0) }}</div>
                                <div class="text-muted fw-semibold mt-1">{{ trans('clinic.medicine_orders.statuses.' . $status) }}</div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        <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.medicine_orders.search_placeholder') }}">
                    </div>
                </div>
                <div class="card-toolbar">
                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="status" id="statusFilter">
                        <option value="">{{ trans('clinic.bookings.all_statuses') }}</option>
                        @foreach (\App\Models\Clinic\MedicineOrder::STATUSES as $status)
                            <option value="{{ $status }}">{{ trans('clinic.medicine_orders.statuses.' . $status) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-4 w-100" id="medicineOrdersTable">
                    <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th>#</th>
                        <th class="min-w-150px">{{ trans('clinic.medicine_orders.patient_id') }}</th>
                        <th>{{ trans('clinic.medicine_orders.booking_id') }}</th>
                        <th class="min-w-150px">{{ trans('clinic.medicine_orders.section_prescription') }}</th>
                        <th>{{ trans('clinic.medicine_orders.total') }}</th>
                        <th class="min-w-150px">{{ trans('clinic.medicine_orders.status') }}</th>
                        <th>{{ trans('clinic.medicine_orders.created_at') }}</th>
                        <th class="text-end min-w-125px">{{ trans('clinic.common.actions') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @include('dashboard.admin.partials.details-modal')
@endsection

@section('js')
    @include('dashboard.admin.partials.crud-table-js')
    @include('dashboard.admin.partials.server-table', [
        'tableId' => 'medicineOrdersTable',
        'url' => route('admin.dashboard.clinic.medicine-orders.index'),
        'columns' => [
            ['data' => 'id', 'name' => 'clinic_medicine_orders.id', 'searchable' => false],
            ['data' => 'patient', 'name' => 'patient', 'orderable' => false],
            ['data' => 'visit', 'name' => 'visit', 'orderable' => false, 'searchable' => false],
            ['data' => 'prescription', 'name' => 'prescription', 'orderable' => false, 'searchable' => false],
            ['data' => 'total', 'name' => 'total', 'searchable' => false],
            ['data' => 'status', 'name' => 'status', 'searchable' => false],
            ['data' => 'created_at', 'name' => 'created_at', 'searchable' => false],
            ['data' => 'action', 'name' => 'action', 'orderable' => false, 'searchable' => false],
        ],
        'order' => [[6, 'desc']],
    ])
    <script>
        $(function () {
            // Status cards act as quick filters.
            $('[data-status-card]').on('click', function (event) {
                event.preventDefault();
                $('#statusFilter').val(this.dataset.statusCard).trigger('change');
            });

            // Change the status straight from the list.
            $('#medicineOrdersTable').on('change', '[data-order-status]', function () {
                var select = this;
                $.ajax({url: select.dataset.orderStatus, type: 'PATCH', data: {status: select.value}, headers: {Accept: 'application/json'}})
                    .done(function (response) {
                        toastr.success(response.message);
                        window.ServerTables.medicineOrdersTable.ajax.reload(null, false);
                    })
                    .fail(function () { toastr.error(@json(trans('dash_site.request_failed'))); });
            });
        });
    </script>
@endsection