@extends('layouts.app')

@section('title', __('vetClinic::lang.medical_conditions'))

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

@section('content')
<section class="content-header">
    <h1><i class="fas fa-disease"></i> @lang('vetClinic::lang.medical_conditions')</h1>
</section>

<section class="content">

    <div class="row" style="margin-bottom:10px;">
        <div class="col-md-12">
            @can('vet_clinic.manage_medical_conditions')
            <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#conditionModal">
                <i class="fa fa-plus"></i> @lang('vetClinic::lang.add_new')
            </button>
            @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="conditions_table">
                    <thead>
                        <tr>
                            <th>@lang('vetClinic::lang.name')</th>
                            <th>Category</th>
                            <th>ICD Code</th>
                            <th>Chronic</th>
                            <th>@lang('vetClinic::lang.status')</th>
                            <th>@lang('vetClinic::lang.actions')</th>
                        </tr>
                    </thead>
                </table>
            @endcomponent
        </div>
    </div>
</section>

{{-- Add/Edit Modal --}}
<div class="modal fade" id="conditionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" style="font-size:15px;">&times;</button>
                <h4 class="modal-title" id="condition_modal_title">Add Medical Condition</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="condition_id">
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label>@lang('vetClinic::lang.name') <span class="text-danger">*</span></label>
                            <input type="text" id="cond_name" class="form-control" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>ICD Code</label>
                            <input type="text" id="cond_icd_code" class="form-control" placeholder="Optional">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Category</label>
                            <input type="text" id="cond_category" class="form-control" placeholder="e.g. Infectious, Metabolic">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>@lang('vetClinic::lang.status')</label>
                            <select id="cond_status" class="form-control">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="cond_is_chronic"> Is Chronic Condition
                    </label>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <textarea id="cond_description" class="form-control" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">@lang('vetClinic::lang.cancel')</button>
                <button class="btn btn-primary" id="btn_save_condition">@lang('vetClinic::lang.save')</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
var conditionsTable = $('#conditions_table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ route('vc.medical-conditions.list') }}',
    columns: [
        { data: 'name', name: 'name' },
        { data: 'category', name: 'category' },
        { data: 'icd_code', name: 'icd_code' },
        { data: 'is_chronic_badge', name: 'is_chronic', orderable: false },
        { data: 'status_badge', name: 'status', orderable: false },
        { data: 'action', name: 'action', orderable: false, searchable: false }
    ]
});

$('[data-target="#conditionModal"]').on('click', function () {
    $('#condition_modal_title').text('Add Medical Condition');
    $('#condition_id').val('');
    $('#cond_name,#cond_icd_code,#cond_category,#cond_description').val('');
    $('#cond_is_chronic').prop('checked', false);
    $('#cond_status').val('active');
});

$(document).on('click', '.btn-edit-condition', function () {
    var id = $(this).data('id');
    $.get('{{ url('vet-clinic/medical-conditions') }}/' + id + '/edit', function (d) {
        $('#condition_modal_title').text('Edit Condition');
        $('#condition_id').val(d.id);
        $('#cond_name').val(d.name);
        $('#cond_category').val(d.category);
        $('#cond_icd_code').val(d.icd_code);
        $('#cond_is_chronic').prop('checked', d.is_chronic == 1);
        $('#cond_status').val(d.status);
        $('#cond_description').val(d.description);
        $('#conditionModal').modal('show');
    });
});

$('#btn_save_condition').on('click', function () {
    var id = $('#condition_id').val();
    var url = id ? '{{ url('vet-clinic/medical-conditions') }}/' + id : '{{ route('vc.medical-conditions.store') }}';
    var method = id ? 'PUT' : 'POST';
    $.ajax({
        url: url, method: method,
        data: {
            _token: '{{ csrf_token() }}',
            name: $('#cond_name').val(),
            category: $('#cond_category').val(),
            icd_code: $('#cond_icd_code').val(),
            is_chronic: $('#cond_is_chronic').is(':checked') ? 1 : 0,
            status: $('#cond_status').val(),
            description: $('#cond_description').val()
        },
        success: function (res) {
            if (res.success) { $('#conditionModal').modal('hide'); toastr.success(res.msg); conditionsTable.ajax.reload(); }
        },
        error: function (xhr) { toastr.error(xhr.responseJSON?.message ?? 'Error'); }
    });
});

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