@extends('adminlte::page')
@section('plugins.Select2', true)
@section('plugins.Toastr', true)
@section('plugins.iCheck', true)
@section('plugins.CustomFileInput', true)
@section('title', 'Nueva Cotización')

@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">Nueva Cotización</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <x-validation-errors class="mb-4" />
                <form data-action="{{ route('price.store') }}" method="POST" id="priceForm" enctype="multipart/form-data">
                    @csrf

                    <div class="form-group">
                        <div class="icheck-primary">
                            <input type="checkbox" id="activeContract" name="activeContract" onchange="activeContrato()" />
                            <label for="activeContract">Vincular Contrato</label>
                        </div>
                        <label>Contrato:</label>
                        <select class="form-control mt-1" disabled style="width: 100%" onchange="changeContrato()"
                            id="contract_id_id" name="contract_id">
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Nombre Cotización:</label>
                        <input type="text" id="name_id" class="form-control" name="name">
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Tiempo Terreno (Días):</label>
                                <input type="number" id="time_land_id" class="form-control" name="time_land">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Tiempo Gabinete (Días):</label>
                                <input type="number" id="time_cabinet_id" class="form-control" name="time_cabinet">
                            </div>
                        </div>
                    </div>
                    <div class="row" id="rowSelect">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Cliente:</label>
                                <select class="form-control" onchange="changeFaena()" style="width: 100%" id="client_id_id"
                                    name="client_id">
                                </select>
                                @can('client.create')
                                    <x-adminlte-button class="btn-sm float-right mt-1" onclick="abrirModalCliente()"
                                        label="NUEVO CLIENTE" theme="primary" />
                                @endcan
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Faena:</label>
                                <select class="form-control" style="width: 100%" id="chore_id_id" name="chore_id[]"
                                    multiple="multiple">

                                </select>
                                @can('chore.create')
                                    <x-adminlte-button class="btn-sm float-right mt-1" onclick="abrirModalFaena()"
                                        label="NUEVA FAENA" theme="primary" />
                                @endcan
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label>Área/Sector:</label>
                        <input type="text" id="sector_id" class="form-control" name="sector">
                    </div>

                    <div class="form-group">
                        <label>Estado:</label>
                        <select class="form-control" style="width: 100%" id="status_id" name="status">
                            <option value="Pendiente">Pendiente</option>
                            <option value="Aprobada">Aprobada</option>
                        </select>
                    </div>
                    <label>Servicios(Opcional):</label>
                    <div id="accordion" class="m-1">
                        <div class="card card-dark">
                            <div class="card-header">
                                <h4 class="card-title w-100">
                                    <a class="d-block w-100" data-toggle="collapse" href="#collapseOne">
                                        Servicios Terreno
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    @foreach ($type_services as $type_service)
                                        @if ($type_service->table == 'Terreno')
                                            <div class="icheck-primary">
                                                <input type="checkbox" value="{{ $type_service->id }}"
                                                    id="type_service_id{{ $type_service->id }}" name="type_service[]" />
                                                <label
                                                    for="type_service_id{{ $type_service->id }}">{{ $type_service->type }}</label>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="card card-dark">
                            <div class="card-header">
                                <h4 class="card-title w-100">
                                    <a class="d-block w-100" data-toggle="collapse" href="#collapseTwo">
                                        Servicios Gabinete
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    @foreach ($type_services as $type_service)
                                        @if ($type_service->table == 'Gabinete')
                                            <div class="icheck-primary">
                                                <input type="checkbox" value="{{ $type_service->id }}"
                                                    id="type_service_id{{ $type_service->id }}" name="type_service[]" />
                                                <label
                                                    for="type_service_id{{ $type_service->id }}">{{ $type_service->type }}</label>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Moneda:</label>
                                <select class="form-control" style="width: 100%" name="coin" id="coin_id">
                                    <option value="CLP">CLP</option>
                                    <option value="USD">USD</option>
                                    <option value="UF">UF</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Monto:</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-dollar-sign"></i>
                                        </span>
                                    </div>
                                    <input type="number" id="amount_id" class="form-control" name="amount"
                                        onkeydown="noPunto(event)">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Descripción(Opcional)</label>
                        <textarea class="form-control" id="description_id" name="description" rows="4"></textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label>Archivo(Opcional):</label>
                        <x-adminlte-input-file type="file" name="file" id="file_id"
                            placeholder="Elija el archivo">
                            <x-slot name="prependSlot">
                                <div class="input-group-text bg-primary">
                                    <i class="fas fa-upload"></i>
                                </div>
                            </x-slot>
                        </x-adminlte-input-file>
                    </div>
                    <x-adminlte-button class="float-right mt-2" type="submit" label="REGISTRAR" theme="primary" />
                </form>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!--modal cliente -->
    <div class="modal" id="modalAgregarCliente" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="titleModal" class="modal-title">Nuevo Cliente</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('client.store') }}" method="POST" id="clientForm">
                        @csrf
                        <div class="form-group">
                            <label>Cliente:</label>
                            <input type="text" id="name_client_id"
                                onkeyup="javascript:this.value=this.value.toUpperCase();" class="form-control"
                                name="name">
                        </div>
                        <div class="form-group">
                            <label>Iniciales Del Cliente:</label>
                            <input type="text" id="initials_id"
                                onkeyup="javascript:this.value=this.value.toUpperCase();" class="form-control"
                                name="initials">
                        </div>
                </div>
                <div class="modal-footer">
                    <x-adminlte-button class="btn-block" label="AGREGAR" theme="primary" type="Submit" />
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!--modal faena -->
    <div class="modal" id="modalAgregarFaena" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="titleModal" class="modal-title">Nueva Faena</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('chore.store') }}" method="POST" id="choreForm">
                        @csrf
                        <div class="form-group">
                            <label>Cliente:</label>
                            <select class="form-control" style="width: 100%" id="client_id_id2" name="client_id">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Faena:</label>
                            <input type="text" id="name_chore_id" class="form-control" name="name">
                        </div>
                </div>
                <div class="modal-footer">
                    <x-adminlte-button id="btnChore" class="btn-block" label="AGREGAR" theme="primary"
                        type="Submit" />
                    </form>
                </div>
            </div>
        </div>
    </div>

@stop


@section('js')
    <script>
        var uriClient = "{{ route('validate.client') }}"
        var uriContract = "{{ route('validate.contract') }}"
        var uriChore = "{{ route('validate.chore') }}"
        $(document).ready(function() {
            $('#rowInput').hide();
            $.fn.select2.defaults.set('language', 'es');
            $('#contract_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.contract') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione un contrato',
                theme: "bootstrap4",
            });
            $('#client_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.client') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione un cliente',
                theme: "bootstrap4",
            });

            $('#chore_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.chore') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term,
                            client: $('#client_id_id').val(),
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione una faena',
                theme: "bootstrap4",
            });
        });

        function changeFaena() {
            $('#chore_id_id').val(null).trigger('change');
        }

        function abrirModalCliente() {
            $("#modalAgregarCliente").modal("show");
        }

        function abrirModalFaena() {
            $("#modalAgregarFaena").modal("show");
            $('#client_id_id2').select2({
                ajax: {
                    url: "{{ route('api.select.client') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione un cliente',
                theme: "bootstrap4",
            });
        }

        function changeContrato() {
            $.ajax({
                url: "{{ route('api.autocontract') }}",
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: "json",
                data: {
                    contract: function() {
                        return $("#contract_id_id").val();
                    },
                },
                success: function(resultado) {
                    console.log(resultado);
                    $('#sector_id').val(resultado.sector);

                    var optionClient = new Option(resultado.client.name, resultado.client.id, true, true);
                    $('#client_id_id').append(optionClient).trigger('change');

                    $.each(resultado.chore, function(index, chore) {
                        var optionChore = new Option(chore.name, chore.id, true, true);
                        $('#chore_id_id').append(optionChore).trigger('change');
                    });
                    



                }
            });
        }

        function noPunto(event) {

            var e = event || window.event;
            var key = e.keyCode || e.which;

            if (key === 110 || key === 190) {

                e.preventDefault();
            }
        }
    </script>
    <script src="/js/general/sweet.js"></script>
    <script src="/js/price/form.js"></script>
@stop