@extends('layouts.app')

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

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

@section('content')
<section class="content-header">
    <h1><i class="fas fa-syringe"></i> @lang('vetClinic::lang.vaccine_types')</h1>
    <ol class="breadcrumb">
        <li><a href="{{ route('vc.departments.index') }}">@lang('vetClinic::lang.settings')</a></li>
        <li class="active">@lang('vetClinic::lang.vaccine_types')</li>
    </ol>
</section>

<section class="content">

    <div class="row" style="margin-bottom:10px;">
        <div class="col-md-12">
            @can('vet_clinic.access_settings')
            <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#vtModal">
                <i class="fa fa-plus"></i> @lang('vetClinic::lang.add_new')
            </button>
            @endcan
            <div class="alert alert-info" style="margin-bottom:0;padding:6px 12px;display:inline-block;">
                <i class="fa fa-info-circle"></i>
                Rows marked <strong>System</strong> are built-in vaccine types installed with the module — you cannot edit or delete them.
                Use <strong>Add New</strong> to create your own clinic-specific types.
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            @component('components.widget', ['class' => 'box-primary'])
                <table class="table table-bordered table-striped" id="vt_table">
                    <thead>
                        <tr>
                            <th>@lang('vetClinic::lang.name')</th>
                            <th>Category</th>
                            <th>Manufacturer</th>
                            <th>Species Target</th>
                            <th>Valid For</th>
                            <th>Type</th>
                            <th>Product</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="vtModal" 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="vt_modal_title">Add Vaccine Type</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="vt_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="vt_name" class="form-control" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Valid For (months) <span class="text-danger">*</span></label>
                            <input type="number" id="vt_valid_months" class="form-control" min="1" value="12">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Category <span class="text-danger">*</span></label>
                            <select id="vt_category" class="form-control">
                                <optgroup label="Vaccines">
                                    <option value="core_vaccine">Core Vaccine — required for all pets</option>
                                    <option value="non_core_vaccine">Non-Core Vaccine — optional / risk-based</option>
                                    <option value="nasal">Nasal Vaccine</option>
                                    <option value="oral">Oral Vaccine / Treatment</option>
                                </optgroup>
                                <optgroup label="Antiparasitics">
                                    <option value="spot_on">Spot-on Treatment</option>
                                    <option value="deworming">Deworming</option>
                                    <option value="topical">Topical Treatment</option>
                                </optgroup>
                                <optgroup label="Other">
                                    <option value="preventive">Preventive Care</option>
                                    <option value="other">Other</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Manufacturer</label>
                            <input type="text" id="vt_manufacturer" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Species Target <small class="text-muted">(leave all unchecked = applies to all)</small></label>
                    <div style="padding:4px 0;">
                        @foreach(['dog' => 'Dog','cat' => 'Cat','rabbit' => 'Rabbit','bird' => 'Bird','hamster' => 'Hamster','other' => 'Other'] as $val => $label)
                        <label class="checkbox-inline">
                            <input type="checkbox" class="vt-species" value="{{ $val }}"> {{ $label }}
                        </label>
                        @endforeach
                    </div>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <textarea id="vt_description" class="form-control" rows="2"></textarea>
                </div>
                <div class="form-group">
                    <label><i class="fa fa-link"></i> Linked Product <span style="font-weight:400;color:#94a3b8;">(for POS pricing)</span></label>
                    <select id="vt_product_id" class="form-control" style="width:100%;"></select>
                    <small class="text-muted" style="font-size:10.5px;">Pick an ERP product so this vaccine flows into the invoice when administered.</small>
                </div>
                <div class="form-group">
                    <label>@lang('vetClinic::lang.status')</label>
                    <select id="vt_status" class="form-control">
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </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_vt">@lang('vetClinic::lang.save')</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
@include('vetClinic::partials.product_picker_js')
<script>
$(document).ready(function () {

var vtTable = $('#vt_table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ route('vc.vaccine-types.list') }}',
    columns: [
        { data: 'name',            name: 'name' },
        { data: 'category_badge',  name: 'category', orderable: false },
        { data: 'manufacturer',    name: 'manufacturer' },
        { data: 'species_list',    name: 'species_list', orderable: false },
        { data: 'valid_for_months',name: 'valid_for_months', render: function(d){ return d + ' mo.'; } },
        { data: 'system_badge',    name: 'system_badge', orderable: false },
        { data: 'product_badge',   name: 'product_id',   orderable: false, searchable: false },
        { data: 'status_badge',    name: 'status', orderable: false },
        { data: 'action',          name: 'action', orderable: false, searchable: false }
    ]
});

$('[data-target="#vtModal"]').on('click', function () {
    $('#vt_modal_title').text('Add Vaccine Type');
    $('#vt_id').val('');
    $('#vt_name,#vt_manufacturer,#vt_description').val('');
    $('#vt_valid_months').val(12);
    $('#vt_category').val('core_vaccine');
    $('#vt_status').val('active');
    $('.vt-species').prop('checked', false);
    if (window.vcInitProductPicker) window.vcInitProductPicker('#vt_product_id', '');
});

// Init product picker once when modal first shows (if not already)
$('#vtModal').on('shown.bs.modal', function () {
    if (!$('#vt_product_id').hasClass('select2-hidden-accessible') && window.vcInitProductPicker) {
        window.vcInitProductPicker('#vt_product_id', '');
    }
});

$(document).on('click', '.btn-edit-vt', function () {
    var id = $(this).data('id');
    $.get('{{ url('vet-clinic/vaccine-types') }}/' + id + '/edit', function (d) {
        $('#vt_modal_title').text('Edit Vaccine Type');
        $('#vt_id').val(d.id);
        $('#vt_name').val(d.name);
        $('#vt_manufacturer').val(d.manufacturer || '');
        $('#vt_valid_months').val(d.valid_for_months);
        $('#vt_category').val(d.category || 'core');
        $('#vt_description').val(d.description || '');
        $('#vt_status').val(d.status);
        $('.vt-species').prop('checked', false);
        if (d.species_target) {
            $.each(d.species_target, function(i, s) {
                $('.vt-species[value="' + s + '"]').prop('checked', true);
            });
        }
        if (window.vcInitProductPicker) window.vcInitProductPicker('#vt_product_id', d.product_id || '');
        $('#vtModal').modal('show');
    });
});

$('#btn_save_vt').on('click', function () {
    var id      = $('#vt_id').val();
    var species = [];
    $('.vt-species:checked').each(function () { species.push($(this).val()); });
    var url = id
        ? '{{ url('vet-clinic/vaccine-types') }}/' + id + '/update'
        : '{{ route('vc.vaccine-types.store') }}';

    $.ajax({
        url: url, method: 'POST',
        data: {
            _token:           '{{ csrf_token() }}',
            name:             $('#vt_name').val(),
            manufacturer:     $('#vt_manufacturer').val(),
            category:         $('#vt_category').val(),
            valid_for_months: $('#vt_valid_months').val(),
            description:      $('#vt_description').val(),
            status:           $('#vt_status').val(),
            product_id:       $('#vt_product_id').val() || null,
            'species_target[]': species
        },
        success: function (res) {
            if (res.success) { $('#vtModal').modal('hide'); toastr.success(res.msg); vtTable.ajax.reload(); }
        },
        error: function (xhr) { toastr.error(xhr.responseJSON?.message ?? 'Error'); }
    });
});

$(document).on('click', '.btn-delete-vt', function () {
    if (!confirm('@lang('vetClinic::lang.confirm_delete')')) return;
    $.ajax({
        url: '{{ url('vet-clinic/vaccine-types') }}/' + $(this).data('id'),
        method: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function (res) { if (res.success) { toastr.success(res.msg); vtTable.ajax.reload(); } }
    });
});

});
</script>
@endsection
