@extends('layouts.app')
@section('title', __('vetClinic::lang.appointment_types'))

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

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

<section class="content">
    @component('components.widget', ['class' => 'box-primary'])
        @slot('tool')
            <div class="box-tools">
                <button class="btn btn-primary btn-sm" id="btn-add-apt-type">
                    <i class="fa fa-plus"></i> @lang('vetClinic::lang.add_new')
                </button>
            </div>
        @endslot

        <table class="table table-bordered table-striped" id="apt_types_table">
            <thead>
                <tr>
                    <th>@lang('vetClinic::lang.name')</th>
                    <th>@lang('vetClinic::lang.color')</th>
                    <th>@lang('vetClinic::lang.icon')</th>
                    <th>@lang('vetClinic::lang.sort_order')</th>
                    <th>@lang('vetClinic::lang.status')</th>
                    <th>@lang('vetClinic::lang.actions')</th>
                </tr>
            </thead>
        </table>
    @endcomponent
</section>

{{-- Modal --}}
<div class="modal fade" id="aptTypeModal" 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;"><span>&times;</span></button>
                <h4 class="modal-title" id="aptTypeModalTitle">@lang('vetClinic::lang.add_new')</h4>
            </div>
            <form id="aptTypeForm">
                <div class="modal-body">
                    <input type="hidden" id="apt_type_id">
                    <div class="form-group">
                        <label>@lang('vetClinic::lang.name') <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="apt_type_name" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>@lang('vetClinic::lang.color')</label>
                                <input type="color" class="form-control" id="apt_type_color" value="#2980b9" style="height:38px;padding:2px 4px;">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>@lang('vetClinic::lang.icon') <small class="text-muted">(FA class)</small></label>
                                <input type="text" class="form-control" id="apt_type_icon" placeholder="fa-stethoscope">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>@lang('vetClinic::lang.sort_order')</label>
                                <input type="number" class="form-control" id="apt_type_sort_order" value="0" min="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>@lang('vetClinic::lang.status')</label>
                                <select class="form-control" id="apt_type_status">
                                    <option value="active">@lang('vetClinic::lang.active')</option>
                                    <option value="inactive">@lang('vetClinic::lang.inactive')</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('vetClinic::lang.cancel')</button>
                    <button type="submit" class="btn btn-primary">@lang('vetClinic::lang.save')</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
var aptTypeTable = $('#apt_types_table').DataTable({
    processing: true, serverSide: true,
    ajax: '{{ route('vc.apt-types.list') }}',
    columns: [
        { data: 'name' },
        { data: 'color_preview', orderable: false },
        { data: 'icon' },
        { data: 'sort_order' },
        { data: 'status_badge', orderable: false },
        { data: 'action', orderable: false, searchable: false },
    ]
});

$('#btn-add-apt-type').on('click', function () {
    $('#aptTypeModalTitle').text('{{ __('vetClinic::lang.add_new') }}');
    $('#apt_type_id').val('');
    $('#aptTypeForm')[0].reset();
    $('#apt_type_color').val('#2980b9');
    $('#aptTypeModal').modal('show');
});

$(document).on('click', '.btn-edit-apt-type', function () {
    var id = $(this).data('id');
    $.get('{{ url('vet-clinic/appointment-types') }}/' + id + '/edit', function (data) {
        $('#aptTypeModalTitle').text('{{ __('vetClinic::lang.edit') }}');
        $('#apt_type_id').val(data.id);
        $('#apt_type_name').val(data.name);
        $('#apt_type_color').val(data.color || '#2980b9');
        $('#apt_type_icon').val(data.icon);
        $('#apt_type_sort_order').val(data.sort_order);
        $('#apt_type_status').val(data.status);
        $('#aptTypeModal').modal('show');
    });
});

$('#aptTypeForm').on('submit', function (e) {
    e.preventDefault();
    var id  = $('#apt_type_id').val();
    var url = id ? '{{ url('vet-clinic/appointment-types') }}/' + id + '/update' : '{{ route('vc.apt-types.store') }}';
    $.ajax({
        url: url, method: 'POST',
        data: {
            _token:     '{{ csrf_token() }}',
            name:       $('#apt_type_name').val(),
            color:      $('#apt_type_color').val(),
            icon:       $('#apt_type_icon').val(),
            sort_order: $('#apt_type_sort_order').val(),
            status:     $('#apt_type_status').val(),
        },
        success: function (res) {
            if (res.success) {
                $('#aptTypeModal').modal('hide');
                toastr.success(res.msg);
                aptTypeTable.ajax.reload();
            }
        },
        error: function (xhr) {
            var msg = xhr.responseJSON?.message
                   ?? xhr.responseJSON?.msg
                   ?? 'Server error (' + xhr.status + '). Check console for details.';
            if (xhr.responseJSON?.errors) {
                msg = Object.values(xhr.responseJSON.errors).map(function(e){ return e[0]; }).join('<br>');
            }
            toastr.error(msg);
        }
    });
});

$(document).on('click', '.btn-delete-apt-type', function () {
    var id = $(this).data('id');
    if (!confirm('{{ __('vetClinic::lang.are_you_sure') }}')) return;
    $.ajax({ url: '{{ url('vet-clinic/appointment-types') }}/' + id, type: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function (res) {
            if (res.success) { toastr.success(res.msg); aptTypeTable.ajax.reload(); }
        }
    });
});
</script>
@endsection
