@extends('adminlte::page')
@section('plugins.Select2', true)
@section('plugins.Toastr', true)
@section('plugins.iCheck', true)
@section('title', 'Nuevo Equipo')

@section('content_header')
    <a class="btn btn-dark btn" href="javascript:history.back()"><i class="fas fa-solid fa-arrow-left"></i> REGRESAR</a>
@stop

@section('content')
    <div class="container">
        <div class="card card-dark">
            <div class="card-header">
                <h3 class="card-title">Nuevo Equipo</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <x-validation-errors class="mb-4" />
                <form data-action="{{ route('equipment.store') }}" method="POST" id="equipmentForm">
                    @csrf
                    <div class="form-group">
                        <label>Serial:</label>
                        <input type="text" id="serial_id" class="form-control" name="serial"
                            onkeyup="javascript:this.value=this.value.toUpperCase();">
                    </div>
                    <div class="form-group">
                        <label>Modelo:</label>
                        <input type="text" id="model_id" class="form-control" name="model"
                            onkeyup="javascript:this.value=this.value.toUpperCase();">
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Marca:</label>
                                <select class="form-control" style="width: 100%" id="brand_id_id" name="brand_id">
                                </select>
                                @can('brand.create')
                                    <x-adminlte-button class="btn-sm float-right mt-1" onclick="abrirModalBrand()"
                                        label="NUEVA MARCA" theme="primary" />
                                @endcan
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Tipo De Equipamiento:</label>
                                <select class="form-control" style="width: 100%" id="type_equipment_id_id"
                                    name="type_equipment_id">

                                </select>
                                @can('type_equipment.create')
                                    <x-adminlte-button class="btn-sm float-right mt-1" onclick="abrirModalType()"
                                        label="NUEVO TIPO" theme="primary" />
                                @endcan
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Fecha De Mantenimiento:</label>
                        <input type="date" id="date_maintenance_id" min="{{$date}}" class="form-control" name="date_maintenance">
                    </div>


                    <div class="form-group">
                        <label>Link de documentación(Opcional):</label>
                        <input type="text" id="link_files_id" class="form-control" name="link_files">
                    </div>

                    <div class="form-group">
                        <label>Estado:</label>
                        <select class="form-control" style="width: 100%" id="status_id" name="status">
                            <option value="Disponible">Disponible</option>
                            <option value="No Disponible">No Disponible</option>

                        </select>
                    </div>
                    <x-adminlte-button class="float-right" type="submit" label="REGISTRAR" theme="primary" />
                </form>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!--modal brand -->
    <div class="modal" id="modalAgregarBrand" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="titleModal" class="modal-title">Nueva marca de equipamiento</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form data-action="{{ route('brand.store') }}" method="POST" id="brandForm">
                        @csrf

                        <div class="form-group">
                            <label>Marca:</label>
                            <input type="text" id="brand_id" onkeyup="javascript:this.value=this.value.toUpperCase();"
                                class="form-control" name="brand">
                        </div>
                </div>
                <div class="modal-footer">
                    <x-adminlte-button class="btn-block" label="AGREGAR" theme="primary" type="Submit" />
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!--modal type -->
    <div class="modal" id="modalAgregarType" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="titleModal" class="modal-title">Nuevo tipo de equipamiento</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form data-action="{{ route('type_equipment.store') }}" method="POST" id="typeEquipmentForm">
                        @csrf

                        <div class="form-group">
                            <label>Tipo De Equipamiento:</label>
                            <input type="text" id="type_id"
                                onkeyup="javascript:this.value=this.value.toUpperCase();" class="form-control"
                                name="type">

                        </div>
                </div>
                <div class="modal-footer">
                    <x-adminlte-button class="btn-block" label="AGREGAR" theme="primary" type="Submit" />
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script>
        var uriBrand = "{{route('validate.brand')}}";
        var uriType = "{{route('validate.type_equipment')}}";
        var uriEquipment = "{{route('validate.equipment')}}";
        $(document).ready(function() {
            $.fn.select2.defaults.set('language', 'es');
            $('#brand_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.brand') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione una marca',
                theme: "bootstrap4",
            });
            $('#type_equipment_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.typeEquipment') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione un tipo de equipamiento',
                theme: "bootstrap4",
            });
        });

        function abrirModalBrand() {
            $("#modalAgregarBrand").modal("show");
        }

        function abrirModalType() {
            $("#modalAgregarType").modal("show");
        }
    </script>
    <script src="/js/equipment/form.js"></script>
    <script src="/js/general/sweet.js"></script>

@stop