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

@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 Contrato</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <x-validation-errors class="mb-4" />
                <form data-action="{{ route('contract.store') }}" method="POST" id="contractForm">
                    @csrf
                    <div class="form-group">
                        <label>Contrato:</label>
                        <div class="icheck-primary">
                            <input type="checkbox" id="activePrice" name="activePrice" onchange="activeCot()" />
                            <label for="activePrice">Vincular Cotización</label>
                        </div>
                        <select class="form-control mt-1" disabled style="width: 100%" id="price_id_id" name="price_id" onchange="changePrice()">
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Numero De Contrato:</label>
                        <input type="text" id="contract_number_id" class="form-control" name="contract_number"
                            onkeyup="javascript:this.value=this.value.toUpperCase();">
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Fecha de Inicio:</label>
                                <input type="date" id="date_start_id" onchange="changeDate()" class="form-control"
                                    name="date_start">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Fecha Final:</label>
                                <input type="date" id="date_end_id" class="form-control" name="date_end">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <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>Administrador De Contrato:</label>
                        <select class="form-control" style="width: 100%" id="user_id_id" name="user_id">

                        </select>
                    </div>
                    <div class="form-group">
                        <label>Descripción(Opcional):</label>
                        <textarea class="form-control" id="description_id" name="description"></textarea>
                    </div>
                    <x-adminlte-button class="float-right" 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');
            $('#price_id_id').select2({
                ajax: {
                    url: "{{route('api.select.price')}}",
                    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",
            });
            $('#user_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.user') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione un administrador de contrato',
                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 changePrice() {
            $.ajax({
                url: "{{ route('api.autoprice') }}",
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: "json",
                data: {
                    price: function() {
                        return $("#price_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');
                    });
                }
            });

        }
    </script>
    <script src="/js/general/sweet.js"></script>
    <script src="/js/contract/form.js"></script>
@stop