@extends('layouts.app')

@section('title', __('clinicCore::lang.medical_reports'))

@section('css')
@include('clinicCore::partials._mobile_responsive')
@endsection

@section('content')
<section class="content-header">
    <h1><i class="fas fa-file-medical"></i> @lang('clinicCore::lang.medical_reports')</h1>
</section>

<section class="content">
    <div class="row" style="margin-bottom:10px;">
        <div class="col-md-12">
            <div class="btn-group" style="margin-right:8px;">
                <button class="btn btn-default btn-sm filter-type active" data-type="">All Types</button>
                @foreach(['lab','xray','ultrasound','ecg','other'] as $type)
                <button class="btn btn-default btn-sm filter-type" data-type="{{ $type }}">{{ ucfirst($type) }}</button>
                @endforeach
            </div>
            @can('clinic.manage_reports')
            <a href="{{ route('clinic.medical-reports.create') }}" class="btn btn-primary pull-right">
                <i class="fa fa-plus"></i> @lang('clinicCore::lang.add_new')
            </a>
            @endcan
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            @component('components.widget', ['class' => 'box-primary'])
                <table class="table table-bordered table-striped" id="reports_table">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Type</th>
                            <th>Patient</th>
                            <th>Contact</th>
                            <th>Doctor</th>
                            <th>Date</th>
                            <th>@lang('clinicCore::lang.actions')</th>
                        </tr>
                    </thead>
                </table>
            @endcomponent
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script>
var currentType = '';
var table = $('#reports_table').DataTable({
    processing: true,
    serverSide: true,
    order: [[5, 'desc']],
    ajax: {
        url: '{{ route('clinic.medical-reports.list') }}',
        data: function (d) { d.report_type = currentType; }
    },
    columns: [
        { data: 'report_title', name: 'report_title' },
        { data: 'type_badge', name: 'report_type', 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: 'created_at', name: 'created_at' },
        { data: 'action', name: 'action', orderable: false, searchable: false }
    ]
});

$('.filter-type').on('click', function () {
    $('.filter-type').removeClass('active');
    $(this).addClass('active');
    currentType = $(this).data('type');
    table.ajax.reload();
});

$(document).on('click', '.btn-delete-report', function () {
    if (!confirm('@lang('clinicCore::lang.confirm_delete')')) return;
    $.ajax({
        url: '{{ url('clinic/medical-reports') }}/' + $(this).data('id'),
        method: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function (res) { if (res.success) { toastr.success(res.msg); table.ajax.reload(); } }
    });
});
</script>
@endsection
