@extends('layouts.app')
@section('title', __('clinicCore::lang.prescriptions'))

@section('css')
<style>
.vc-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.vc-page-title  { font-size:22px; font-weight:800; color:#1e293b; display:flex; align-items:center; gap:10px; }
.vc-page-title i { color:#2980b9; }
.vc-page-actions { display:flex; gap:8px; flex-wrap:wrap; }

.filter-card { background:#fff; border-radius:12px; padding:16px 20px; box-shadow:0 1px 6px rgba(0,0,0,.08); margin-bottom:14px; border:1px solid #e8ecf1; }
.filter-row  { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.filter-field { display:flex; flex-direction:column; gap:4px; }
.filter-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#64748b; white-space:nowrap; }
.filter-field .form-control { height:34px; font-size:12px; border-radius:7px; border:1.5px solid #e2e8f0; }
.search-wrap { position:relative; flex:1; min-width:200px; }
.search-wrap .fa { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:12px; }
.search-wrap input { padding-left:30px !important; }

/* Status tabs */
.rx-tab-row { display:flex; gap:5px; flex-wrap:wrap; padding:4px 0 10px; border-bottom:2px solid #f1f5f9; margin-bottom:14px; }
.rx-tab { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; border:1.5px solid transparent; cursor:pointer; background:#f8fafc; color:#64748b; transition:all .14s; white-space:nowrap; }
.rx-tab:hover { background:#f1f5f9; }
.rx-tab .cnt-badge { background:rgba(0,0,0,.1); border-radius:10px; font-size:10px; padding:0 6px; font-weight:800; line-height:1.5; }
.rx-tab.active { color:#fff !important; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.rx-tab[data-status="all"].active     { background:#475569; border-color:#475569; }
.rx-tab[data-status="active"].active  { background:#22c55e; border-color:#22c55e; }
.rx-tab[data-status="completed"].active { background:#0ea5e9; border-color:#0ea5e9; }
.rx-tab[data-status="cancelled"].active { background:#ef4444; border-color:#ef4444; }

#prescriptions_table td { vertical-align:middle; font-size:12.5px; }
#prescriptions_table_wrapper .dataTables_filter { display:none; }
.vc-table-box { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.08); border:1px solid #e8ecf1; }
</style>
@include('clinicCore::partials._mobile_responsive')
@endsection

@section('content')
<section class="content-header" style="display:none"></section>
<section class="content">

<div class="vc-page-header">
    <div class="vc-page-title">
        <i class="fas fa-prescription-bottle-alt"></i>
        @lang('clinicCore::lang.prescriptions')
    </div>
    <div class="vc-page-actions">
        @can('clinic.manage_prescriptions')
        <a href="{{ route('clinic.prescriptions.create') }}" class="btn btn-primary btn-sm">
            <i class="fa fa-plus"></i> New Prescription
        </a>
        @endcan
    </div>
</div>

{{-- Filter Card --}}
<div class="filter-card">
    <div class="filter-row">
        <div class="filter-field" style="flex:1;min-width:200px;">
            <span class="filter-label"><i class="fa fa-search fa-fw"></i> Search</span>
            <div class="search-wrap">
                <i class="fa fa-search"></i>
                <input type="text" id="rx_search" class="form-control" placeholder="Ref no, patient name, contact…">
            </div>
        </div>
        <div class="filter-field" style="min-width:130px;">
            <span class="filter-label"><i class="fa fa-calendar fa-fw"></i> Date From</span>
            <input type="text" id="rx_date_from" class="form-control datepicker" placeholder="From date" autocomplete="off" style="height:34px;font-size:12px;border-radius:7px;border:1.5px solid #e2e8f0;">
        </div>
        <div class="filter-field" style="min-width:130px;">
            <span class="filter-label"><i class="fa fa-calendar fa-fw"></i> Date To</span>
            <input type="text" id="rx_date_to" class="form-control datepicker" placeholder="To date" autocomplete="off" style="height:34px;font-size:12px;border-radius:7px;border:1.5px solid #e2e8f0;">
        </div>
        <div class="filter-field" style="align-self:flex-end;">
            <button id="btn_clear_rx" title="Clear filters"
                    style="height:34px;padding:0 14px;border-radius:7px;border:1.5px solid #e2e8f0;
                           background:#fff;color:#64748b;font-size:12px;font-weight:700;cursor:pointer;
                           display:inline-flex;align-items:center;gap:6px;transition:all .14s;">
                <i class="fa fa-times-circle" style="color:#ef4444;font-size:13px;"></i> Clear
            </button>
        </div>
    </div>
</div>

{{-- Status Tabs --}}
<div class="rx-tab-row" id="rx_tabs">
    <button class="rx-tab active" data-status="all">All</button>
    <button class="rx-tab" data-status="active" style="border-color:#22c55e22;color:#16a34a;">Active</button>
    <button class="rx-tab" data-status="completed" style="border-color:#0ea5e922;color:#0284c7;">Completed</button>
    <button class="rx-tab" data-status="cancelled" style="border-color:#ef444422;color:#dc2626;">Cancelled</button>
</div>

{{-- Table --}}
<div class="vc-table-box">
    <div style="padding:14px;">
        <table class="table table-bordered table-striped table-hover" id="prescriptions_table" style="font-size:12.5px;">
            <thead style="background:#f8fafc;">
                <tr>
                    <th style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.3px;">Ref</th>
                    <th style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.3px;">Patient</th>
                    <th style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.3px;">Contact</th>
                    <th style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.3px;">Doctor</th>
                    <th style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.3px;">Date</th>
                    <th style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.3px;">Valid Until</th>
                    <th style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.3px;">Status</th>
                    <th style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.3px;">Actions</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

</section>
@endsection

@section('javascript')
<script>
var currentRxStatus = 'all';
var rxTableInst     = null;
var rxAjaxUrl       = '{{ route('clinic.prescriptions.list') }}';
var csrfToken       = '{{ csrf_token() }}';
window.clcActionTarget = '{{ $clcActionTarget ?? "_self" }}';

$(document).on('click', '#prescriptions_table a.btn[href]', function (e) {
    if (window.clcActionTarget === '_blank') {
        e.preventDefault();
        window.open($(this).attr('href'), '_blank');
    }
});

$(document).ready(function () {
    initTable();
    initFilters();
    initDatePickers();
});

function initDatePickers() {
    $('#rx_date_from, #rx_date_to').datepicker({
        autoclose: true,
        format: datepicker_date_format,
        todayHighlight: true,
    }).on('changeDate', function () {
        if (rxTableInst) rxTableInst.ajax.reload();
    });
}

function initTable() {
    rxTableInst = $('#prescriptions_table').DataTable({
        processing: true,
        serverSide: true,
        order: [[4, 'desc']],
        ajax: {
            url: rxAjaxUrl,
            data: function (d) {
                d.filter_search    = $('#rx_search').val();
                d.filter_status    = currentRxStatus === 'all' ? '' : currentRxStatus;
                d.filter_date_from = $('#rx_date_from').val();
                d.filter_date_to   = $('#rx_date_to').val();
            }
        },
        columns: [
            { data: 'ref_no_col',           name: 'ref_no',           orderable: false },
            { data: 'pet_name',              name: 'pet_name',         orderable: false },
            { data: 'owner_name',            name: 'owner_name',       orderable: false },
            { data: 'doctor_name',           name: 'doctor_name',      orderable: false },
            { data: 'prescribed_date_col',   name: 'prescribed_date' },
            { data: 'valid_until_col',       name: 'valid_until' },
            { data: 'status_badge',          name: 'status',           orderable: false },
            { data: 'action',                name: 'action',           orderable: false, searchable: false }
        ],
        pageLength: 25,
        language: { processing: '<i class="fa fa-spinner fa-spin"></i> Loading…' }
    });
}

var filterTimer = null;
function initFilters() {
    $('#rx_search').on('input', function () {
        clearTimeout(filterTimer);
        filterTimer = setTimeout(function () { if (rxTableInst) rxTableInst.ajax.reload(); }, 350);
    });

    $('#rx_date_from, #rx_date_to').on('change', function () {
        if (rxTableInst) rxTableInst.ajax.reload();
    });

    // Status tabs
    $('#rx_tabs .rx-tab').on('click', function () {
        currentRxStatus = $(this).data('status');
        $('#rx_tabs .rx-tab').removeClass('active');
        $(this).addClass('active');
        if (rxTableInst) rxTableInst.ajax.reload();
    });

    $('#btn_clear_rx').on('click', function () {
        $('#rx_search').val('');
        $('#rx_date_from, #rx_date_to').val('');
        currentRxStatus = 'all';
        $('#rx_tabs .rx-tab').removeClass('active').filter('[data-status="all"]').addClass('active');
        if (rxTableInst) rxTableInst.ajax.reload();
    });
}

// Delete
$(document).on('click', '.btn-delete-rx', function () {
    if (!confirm('@lang('clinicCore::lang.are_you_sure')')) return;
    var id = $(this).data('id');
    $.ajax({
        url: '{{ url('clinic/prescriptions') }}/' + id,
        method: 'DELETE',
        data: { _token: csrfToken },
        success: function (res) {
            if (res.success) { toastr.success(res.msg); if (rxTableInst) rxTableInst.ajax.reload(); }
        }
    });
});
</script>
@endsection
