@extends('layouts.index', ['subHeader' => 'Nuevo Medicamento Incautado'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('medicamentos_incautados.index') }}" class="text-decoration-none text-dark"> / Medicamentos Incautados</a>
    <span> / Nuevo registro</span>
@endsection

@section('content')
    <div class="d-flex justify-content-end gap-3 flex-wrap">
        <div class="btn-group">
            <a href="{{ route('medicamentos_incautados.uploadView') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-file-earmark-spreadsheet"></i> Subir Excel
            </a>
        </div>
        <div class="btn-group">
            <a href="{{ route('medicamentos_incautados.index') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-arrow-left-circle-fill"></i> Atrás
            </a>
        </div>
    </div>

    <br>

    <div class="container-fluid shadow-s p-4">
        @if ($errors->any())
            <div class="alert alert-danger"><strong>{{ $errors->first() }}</strong></div>
        @endif

        <form class="row g-3" action="{{ route('medicamentos_incautados.store') }}" method="POST">
            @csrf
            <h1 class="fs-3 fw-bolder">Nuevo Registro</h1>

            <!-- MES -->
            <div class="col-md-4">
                <label for="mes" class="form-label fw-bolder">Mes</label>
                <select name="mes" id="mes" class="form-select fromcss form-select-lg" data-control="select2" required>
                    <option value="">Seleccione un mes...</option>
                    @foreach (\App\Models\MedicamentoIncautado::NOMBRE_MESES as $key => $mes)
                        <option value="{{ $key }}" {{ old('mes') == $key ? 'selected' : '' }}>{{ $mes }}</option>
                    @endforeach
                </select>
            </div>

            <!-- PAIS -->
            <div class="col-md-4">
                <label for="pais_id" class="form-label fw-bolder">País</label>
                <select name="pais_id" id="pais_id" class="form-select fromcss form-select-lg" data-control="select2" required>
                    <option value="">Seleccione un país...</option>
                    @foreach ($paises as $pais)
                        <option value="{{ $pais->id }}" {{ old('pais_id') == $pais->id ? 'selected' : '' }}>{{ $pais->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <!-- MEDICAMENTO INCAUTADO -->
            <div class="col-md-4">
                <label class="form-label fw-bolder">Medicamento Incautado</label>
                <div class="d-flex align-items-center">
                    <select id="medicamento_select" class="form-select fromcss" data-control="select2" data-placeholder="Seleccione un medicamento...">
                        <option></option>
                        @foreach ($medicamentos as $medicamento)
                            <option value="{{ $medicamento->nombre }}" {{ old('medicamento_incautado') == $medicamento->nombre ? 'selected' : '' }}>
                                {{ $medicamento->nombre }}
                            </option>
                        @endforeach
                    </select>

                    <input type="checkbox" id="check_medicamento" class="form-check-input ms-2">
                    <input type="text" id="medicamento_text" class="form-control fromcss ms-2 d-none" placeholder="Otro medicamento...">
                </div>
                <input type="hidden" name="medicamento_incautado" id="medicamento_hidden" value="{{ old('medicamento_incautado') }}">
            </div>

            <!-- INFORMACION -->
            <div class="col-md-12">
                <label for="informacion" class="form-label fw-bolder">Información</label>
                <textarea name="informacion" id="informacion" rows="3" class="form-control fromcss" required>{{ old('informacion') }}</textarea>
            </div>

            <!-- BOTONES -->
            <div class="col-md-12 d-flex justify-content-end mt-4">
                <a href="{{ route('medicamentos_incautados.index') }}" class="btn btn-lg btn-cancelar mx-2">Cancelar</a>
                <button type="submit" class="btn btn-lg btn-enviar">Guardar</button>
            </div>
        </form>
    </div>

    <script>
        $(document).ready(function () {
            function initSelect2() {
                $('#medicamento_select').select2({
                    width: '100%',
                    placeholder: function () {
                        return $(this).data('placeholder');
                    },
                    allowClear: true
                });
            }

            initSelect2();

            $('#check_medicamento').change(function () {
                if ($(this).is(':checked')) {
                    $('#medicamento_select').select2('destroy').hide();
                    $('#medicamento_text').removeClass('d-none').focus();
                } else {
                    $('#medicamento_text').addClass('d-none').val('');
                    $('#medicamento_select').show();
                    initSelect2();
                }
            });

            $('#medicamento_select, #medicamento_text').on('change keyup', function () {
                let value = $('#check_medicamento').is(':checked') ? $('#medicamento_text').val() : $('#medicamento_select').val();
                $('#medicamento_hidden').val(value);
            });
        });
    </script>
@endsection