@extends('layouts.app')

@section('content')

    <!-- end sidebar menu -->
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                        <div class="page-title text-danger">Sin Sucursal</div>
                    </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li><i class="fa fa-square"></i>&nbsp;<a class="parent-item" href="{{ url('/puestos') }}">Listado de Rutas</a>
                        &nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">{{isset($edit) ? 'Actualizar' : 'Crear'}} Bitacora de Ruta</li>
                    </ol>
                </div>
            </div>
            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>{{isset($edit) ? 'Actualizar' : 'Crear'}} Bitacora de Ruta</header>
                        </div>
                        <form action="{{route('bitacora-rutas.store')}}" method="POST">
                            @method('POST')
                            @csrf
                        <div class="card-body">
                        @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="row col-md-12">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Ruta:</label>
                                        <select name="ruta_id" class="form-control select2">
                                            <option value="">Seleccione</option>
                                            @foreach($routes as $route)
                                                <option value="{{$route->ruta_id}}" {{ old('ruta_id') == $route->ruta_id ? 'selected' : '' }}>{{$route->ruta_nombre}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                 <div class="col-md-6">
                                 <div class="form-group">
                                        <label for="fecha_cobro">Fecha de Cobro:</label>
                                        <input type="date" class="form-control" name="fecha_cobro" id="fecha_cobro" value="{{ old('fecha_cobro') }}" required>
                                    </div>
                                 </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                <table id="customer-table" class="table table-bordered table-striped">
                                    <thead>
                                        <th>ID</th>
                                        <th>Cliente</th>
                                        <th>Acción</th>
                                    </thead>
                                    <tbody id="load-customers"></tbody>
                                </table>
                                </div>
                                <div class="col-md-6">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <th>ID</th>
                                        <th>Clientes Seleccionados</th>
                                        <th>Acción</th>
                                    </thead>
                                    <tbody id="load-clone-data">
                                    @if(old('clientes'))
                                                @foreach(old('clientes') as $cliente)
                                                    <tr>
                                                        <td>{{ $cliente }}</td>
                                                        <td>Cliente {{ $cliente }}</td>
                                                        <td>
                                                            <a href="#" class="btn btn-danger customer-remove" data-name="{{ $cliente }}"><i class="fas fa-arrow-left"></i></a>
                                                        </td>
                                                        <input type="hidden" name="clientes[]" value="{{ $cliente }}">
                                                    </tr>
                                                @endforeach
                                            @endif
                                    </tbody>
                                </table>
                                </div>
                            </div>
 
                        </div>
                      </div>
                        <div class="card-footer text-center">
                            <div class="text-center">
                                <button type="submit" class="btn bg-success">Aceptar</button>
                                <a class="btn bg-danger" href="{{ route('bitacora-rutas.index') }}" >Cancelar</a>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
@endsection
@section('script')
<script src="//cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
    <script>

        function get_data_table_customer(){

            let elements = []

            const load_clone_data = $("#load-clone-data .sorting_1")

            for (let index = 0; index < load_clone_data.length; index++) {
                const id_load_data = load_clone_data[index].innerText;

                elements.push(id_load_data)
                
            }

            return elements;
        }

        $(document).ready(function () {
            var customersAdded = [];
      
            $("body").on('click','a.customer-remove', function(){
                let $clon = $(this).parent().parent().clone(true, true);
                removeByValue(customersAdded, $(this).attr("data-name"));
                $clon.find('a').removeClass("btn-danger").addClass("btn-success").html('<i class="fas fa-arrow-right"></i>').removeClass("customer-remove").addClass("customer-clone");
                $("tbody#load-customers").append($clon);
                $(this).parent().parent().remove();
                return false;
            });

            $("body").on('click','a.customer-clone', function(){

                let $clon = $(this).parent().parent().clone(true, true);
                customersAdded.push($(this).attr("data-name"));

                console.log(customersAdded);
                console.log(get_data_table_customer())

                if(  get_data_table_customer().includes( $(this).attr("data-name") ) ){

                    console.log(get_data_table_customer());
                    console.log(customersAdded);

                    $(this).parent().parent().remove();
                    Swal.fire({
        icon: 'warning',
        title: 'Cliente ya seleccionado',
        text: 'Este cliente ya ha sido seleccionado anteriormente. Por favor, elija otro cliente.',
        confirmButtonText: 'Aceptar'
    });

                    return;

                }

      
                $clon.find('a').removeClass("btn-succcess").addClass("btn-danger").html('<i class="fas fa-arrow-left"></i>').addClass("customer-remove").removeClass("customer-clone").before('<input type="hidden" name="clientes[]" value="'+$(this).attr("data-name")+'">');
                $("tbody#load-clone-data").append($clon);
                $(this).parent().parent().remove();

                return false;
            });

            function removeByValue(array, value) {
                var index = array.indexOf(value);
                if (index !== -1) {
                    array.splice(index, 1);
                }
                return array;
            }

            $('.select2').select2()
            var table = $("table#customer-table").DataTable({
                "columns":[
                    { "data" : "id"},
                    { "data":"customer" },
                    { "data":"button" }
                ],
                "lengthChange": false,
               
            });

            @if(old('ruta_id'))
                    $.ajax({
                        url: '{{route("customer_route_log")}}',
                        type: 'POST',
                        data: { route_id: {{old('ruta_id')}} },
                        success: function(data) {

                           
                            table.clear().draw(); // Clear existing data
                            table.rows.add(data).draw(); // Add new data
                        },
                        error: function(error) {
                            console.log('Error:', error);
                        }
                    });
            @endif

            $("select[name='ruta_id']").change(function(){
                let route_id = $(this).val();
                if(route_id){
                    $.ajax({
                        url: '{{route("customer_route_log")}}',
                        type: 'POST',
                        data: { route_id: route_id },
                        success: function(data) {
                            table.clear().draw(); // Clear existing data
                            table.rows.add(data).draw(); // Add new data
                        },
                        error: function(error) {
                            console.log('Error:', error);
                        }
                    });
                }
            });

        $.fn.dataTable.ext.search.push(
                function(settings, data, dataIndex) {
                    var customer = data[0];
                    return !customersAdded.includes(customer);
                }
            );

            function logCurrentPageAndData() {
                var info = table.page.info();
                var pageData = table.data();
                console.log(pageData);
                var filteredData = [];
                for (var i = 0; i < pageData.length; i++) {
                    var recordId = pageData[i].id;
                    if (!customersAdded.includes(recordId)) {
                        filteredData.push(pageData[i]);
                    }
                }

                table.clear().rows.add(filteredData).draw();
            }

            table.on('draw', function() {
            });

        });
    </script>
@endsection