@extends('layouts.app', ['title' => 'Add medication', 'showNav' => true])

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
@endpush

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <h1 class="h3 mb-4"><i class="bi bi-capsule me-2"></i>Add medication</h1>
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form method="post" action="{{ route('medications.store') }}" id="medication-form">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label" for="category">Category</label>
                            <select class="form-select" name="category" id="category" required>
                                <option value="" disabled {{ old('category') ? '' : 'selected' }}>Choose…</option>
                                @foreach($categories as $value => $label)
                                    <option value="{{ $value }}" @selected(old('category') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label d-block">Apply to</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="apply_to" id="apply_all" value="all"
                                       @checked(old('apply_to', 'all') === 'all')>
                                <label class="form-check-label" for="apply_all">To all (Bulk)</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="apply_to" id="apply_tag" value="tag"
                                       @checked(old('apply_to') === 'tag')>
                                <label class="form-check-label" for="apply_tag">Select tag no (Animal wise)</label>
                            </div>
                            <div class="form-text" id="bulk-hint">Cost is split equally among animals in this category added more than 30 days ago.</div>
                        </div>

                        <div class="mb-3" id="tag-wrap">
                            <label class="form-label" for="animal_id">Tag no</label>
                            <select class="form-select" name="animal_id" id="animal_id" style="width:100%">
                                <option value="">Choose tag…</option>
                            </select>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label" for="medication_date">Date</label>
                                <input class="form-control" type="date" name="medication_date" id="medication_date"
                                       value="{{ old('medication_date', now()->format('Y-m-d')) }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="cost">Cost</label>
                                <input class="form-control" type="number" step="0.01" min="0" name="cost" id="cost"
                                       value="{{ old('cost') }}" required>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="description">Description</label>
                            <input class="form-control" type="text" name="description" id="description"
                                   value="{{ old('description') }}" required>
                        </div>

                        <button type="submit" class="btn btn-primary">Save</button>
                        <a href="{{ route('medications.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var animalsUrl = @json(route('medications.animals'));
        var oldAnimalId = @json(old('animal_id'));
        var $animal = $('#animal_id');

        $animal.select2({
            theme: 'bootstrap-5',
            placeholder: 'Search tag no…',
            allowClear: true,
            width: '100%'
        });

        function toggleApplyTo() {
            var isTag = document.getElementById('apply_tag').checked;
            document.getElementById('tag-wrap').style.display = isTag ? 'block' : 'none';
            document.getElementById('bulk-hint').style.display = isTag ? 'none' : 'block';
            $animal.prop('required', isTag);
        }

        function loadAnimals(category, selected) {
            $animal.empty().append(new Option('Choose tag…', '', true, false));
            if (!category) {
                $animal.trigger('change');
                return;
            }
            fetch(animalsUrl + '?category=' + encodeURIComponent(category), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                data.forEach(function (a) {
                    var opt = new Option(a.tag_no, a.id, false, String(a.id) === String(selected));
                    $animal.append(opt);
                });
                $animal.trigger('change');
            });
        }

        document.querySelectorAll('input[name="apply_to"]').forEach(function (el) {
            el.addEventListener('change', toggleApplyTo);
        });

        document.getElementById('category').addEventListener('change', function () {
            loadAnimals(this.value, oldAnimalId);
        });

        toggleApplyTo();
        if (document.getElementById('category').value) {
            loadAnimals(document.getElementById('category').value, oldAnimalId);
        }
    });
</script>
@endpush