@extends('layouts.app')

@section('title', __('nx600Lab::lang.patients'))

@section('content')
<section class="content-header">
    <h1><i class="fas fa-user-injured"></i> {{ __('nx600Lab::lang.patients') }}</h1>
</section>

<section class="content">

    @if(session('status'))
        <div class="alert alert-{{ session('status')['success'] ? 'success' : 'danger' }}">
            {{ session('status')['msg'] }}
        </div>
    @endif

    <div class="row" style="margin-bottom:10px;">
        <div class="col-md-12">
            <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#patientModal" id="btnAddPatient">
                <i class="fa fa-plus"></i> {{ __('nx600Lab::lang.add_new') }}
            </button>
            <p class="text-muted">
                A standalone patient registry for reference. When VetClinic sync is enabled, raise
                lab orders against VetClinic pets instead.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            @component('components.widget', ['class' => 'box-primary'])
                <form method="GET" class="form-inline" style="margin-bottom:12px;">
                    <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Name / ID...">
                    <button class="btn btn-default"><i class="fa fa-search"></i> Filter</button>
                </form>

                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Patient ID</th>
                            <th>Name</th>
                            <th>Species</th>
                            <th>Sex</th>
                            <th>Age</th>
                            <th>{{ __('nx600Lab::lang.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($patients as $p)
                            <tr>
                                <td>{{ $p->patient_id ?: '—' }}</td>
                                <td>{{ $p->patient_name }}</td>
                                <td>{{ $p->species_name }}</td>
                                <td>{{ $p->sex_label }}</td>
                                <td>{{ $p->age_label }}</td>
                                <td>
                                    <button class="btn btn-xs btn-primary btn-edit-patient"
                                            data-id="{{ $p->id }}"
                                            data-name="{{ $p->patient_name }}"
                                            data-pid="{{ $p->patient_id }}"
                                            data-sex="{{ $p->sex }}"
                                            data-age="{{ $p->age }}"
                                            data-species="{{ $p->species }}">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <form method="POST" action="{{ route('nx.patients.destroy', $p->id) }}" style="display:inline;"
                                          onsubmit="return confirm('{{ __('nx600Lab::lang.confirm_delete') }}');">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-center text-muted">No patients yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>

                {!! $patients->links() !!}
            @endcomponent
        </div>
    </div>
</section>

{{-- Add / Edit modal --}}
<div class="modal fade" id="patientModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="patientForm" action="{{ route('nx.patients.store') }}">
                @csrf
                <input type="hidden" name="_method" id="patientMethod" value="POST">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="patientModalTitle">Add Patient</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Patient Name *</label>
                        <input type="text" name="patient_name" id="f_name" maxlength="60" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Patient ID</label>
                        <input type="text" name="patient_id" id="f_pid" maxlength="13" class="form-control">
                    </div>
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>Species</label>
                            <select name="species" id="f_species" class="form-control">
                                <option value="0">Unknown</option>
                                @foreach($speciesMap as $code => $label)
                                    <option value="{{ $code }}">{{ $label }} ({{ $code }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Sex</label>
                            <select name="sex" id="f_sex" class="form-control">
                                <option value="9">Unknown</option>
                                <option value="0">Male</option>
                                <option value="1">Female</option>
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>Age (years)</label>
                            <input type="number" name="age" id="f_age" min="0" max="999" class="form-control" placeholder="Unknown">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('nx600Lab::lang.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('nx600Lab::lang.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
$(function () {
    var base = "{{ url('nx600/patients') }}";

    $('#btnAddPatient').on('click', function () {
        $('#patientModalTitle').text('Add Patient');
        $('#patientForm').attr('action', base);
        $('#patientMethod').val('POST');
        $('#f_name,#f_pid,#f_age').val('');
        $('#f_species').val('0');
        $('#f_sex').val('9');
    });

    $('.btn-edit-patient').on('click', function () {
        var d = $(this).data();
        $('#patientModalTitle').text('Edit Patient');
        $('#patientForm').attr('action', base + '/' + d.id);
        $('#patientMethod').val('PUT');
        $('#f_name').val(d.name);
        $('#f_pid').val(d.pid);
        $('#f_age').val(d.age === 999 ? '' : d.age);
        $('#f_species').val(d.species);
        $('#f_sex').val(d.sex);
        $('#patientModal').modal('show');
    });
});
</script>
@endsection
