@extends('layouts.template')


@section('content')

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header flex-column flex-md-row">
                <div class="head-label text-left">
                    <h5 class="card-title mb-0 lead fs-3 text-primary">Almacen</h5>
                </div>
            </div>
            <div class="card-datatable table-responsive">
                <table class="table border-top" id="tableAlmacenDt">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Courier</th>
                            <th>Guía</th>
                            <th>Fecha de Despacho</th>
                            <th>Fecha de Entrega</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
    <div class="modal fade" id="warehouseModal" tabindex="-1" role="dialog" aria-labelledby="warehouseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <!-- Contenido del Modal -->
                <div class="modal-header">
                    <h5 class="modal-title" id="warehouseModalLabel">Detalles de Almacén</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="row">
                                    <div class="col-xxl">
                                        <div class="card mb-4">
                                            <div class="card-header d-flex align-items-center justify-content-between">
                                                <h5 class="mb-0">Almacén</h5>
                                                <small class="text-muted float-end">Detalles del Almacén</small>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Courier:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalCourier"></label>
                                                    </div>
    
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Guía:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalGuide"></label>
                                                    </div>
                                                </div>
    
                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Master Box:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalMasterBox"></label>
                                                    </div>
    
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Fecha de Despacho:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalDispatchDate"></label>
                                                    </div>
                                                </div>
    
                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Fecha de Entrega:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalDeliveryDate"></label>
                                                    </div>
    
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Modelo:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalModelId"></label>
                                                    </div>
                                                </div>
    
                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Equipo:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalEquipmentId"></label>
                                                    </div>
    
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Tipo de Estado del Almacén:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalWarehouseStateTypeId"></label>
                                                    </div>
                                                </div>
    
                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Observación:</label>
                                                    </div>
                                                    <div class="col-sm-9">
                                                        <label class="col-form-label text-break" id="modalObservation"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>



    <!-- Agregar Almacén Modal -->
    <div class="modal fade" id="addWarehouseModal" tabindex="-1" role="dialog" aria-labelledby="addWarehouseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addWarehouseModalLabel">Agregar Almacén</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addWarehouseForm" action="/warehouses/create" method="POST">
                        @csrf
                        <input type="hidden" id="warehouse_id" name="warehouse_id">
                        <!-- Campos del formulario para agregar almacén -->
                        <div class="mb-3">
                            <label for="courier">Courier</label>
                            <input type="text" id="courier" name="courier" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="guide">Guía</label>
                            <input type="text" name="guide" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="master_box">Master Box</label>
                            <input type="text" name="master_box" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="dispatch_date">Fecha de Despacho</label>
                            <input type="date" name="dispatch_date" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="delivery_date">Fecha de Entrega</label>
                            <input type="date" name="delivery_date" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="model_id">ID de Modelo</label>
                            <select name="model_id" class="form-control" required>
                                <option value="">Seleccionar</option>
                                @foreach ($models as $model)
                                    <option value="{{ $model->id }}">{{ $model->model_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="equipment_id">Equipo</label>
                            <select name="equipment_id" class="form-control">
                                <option value="">Seleccionar</option>
                                @foreach ($equipments as $equipment)
                                    <option value="{{ $equipment->id }}">{{ $equipment->serie }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="warehouse_state_type_id">Tipo de Estado de Almacén</label>
                            <select name="warehouse_state_type_id" class="form-control" required>
                                <option value="">Seleccionar</option>
                                @foreach ($warehouseStateTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->type_equipment_state }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="observation">Observación</label>
                            <textarea name="observation" class="form-control"></textarea>
                        </div>                   
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary">Guardar</button>
                        </div>
                    </form>
                    
                    
                </div>
            </div>
        </div>
    </div>

    <!-- Editar Almacén Modal -->
    <div class="modal fade" id="editWarehouseModal" tabindex="-1" role="dialog" aria-labelledby="editWarehouseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editWarehouseModalLabel">Editar Almacén</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editWarehouseForm" action="" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" id="warehouse_id" name="warehouse_id">
                        <!-- Campos del formulario para agregar almacén -->
                        <div class="mb-3">
                            <label for="courier">Courier</label>
                            <input type="text" id="courierm" name="courier" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="guide">Guía</label>
                            <input type="text" id="guidem" name="guide" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="master_box">Master Box</label>
                            <input type="text" id="master_boxm" name="master_box" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="dispatch_date">Fecha de Despacho</label>
                            <input type="date" id="dispatch_datem" name="dispatch_date" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="delivery_date">Fecha de Entrega</label>
                            <input type="date" id="delivery_datem" name="delivery_date" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="model_id">Modelo</label>
                            <select id="model_idm" name="model_id" class="form-control" required>
                                <option value="">Seleccionar</option>
                                @foreach ($models as $model)
                                    <option value="{{ $model->id }}">{{ $model->model_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="equipment_id">Equipo</label>
                            <select id="equipment_idm" name="equipment_id" class="form-control">
                                <option value="">Seleccionar</option>
                                @foreach ($equipments as $equipment)
                                    <option value="{{ $equipment->id }}">{{ $equipment->serie }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="warehouse_state_type_id">Tipo de Estado de Almacén</label>
                            <select id="warehouse_state_type_idm" name="warehouse_state_type_id" class="form-control" required>
                                <option value="">Seleccionar</option>
                                @foreach ($warehouseStateTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->type_equipment_state }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="observation">Observación</label>
                            <textarea id="observationm" name="observation" class="form-control"></textarea>
                        </div>                   
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary">Actualizar</button>
                        </div>
                    </form>   
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        var configParams = {
            columns: [{
                    data: 'id'
                },
                {
                    data: 'courier'
                },
                {
                    data: 'guide'
                },
                {
                    data: 'dispatch_date'
                },
                {
                    data: 'delivery_date'
                },
                {
                    data: '',
                    render: function (data, type, full, meta) {
                        var btnEliminarPostulante = '<a class="btn btn-sm btn-icon" title="Eliminar" href="/warehouses/destroy/' + full['id'] + '" ><i class="bx bx-trash bx-sm"></i></a>'
                        var btnMostrarOffcanvasEditar = '<button title="Editar" class="btn btn-sm btn-icon" onclick="cargarEditarAlmacen(' + full['id'] + ');"><i class="bx bx-edit bx-sm"></i></button>'
                        var btnMostrarDetallesUsuario = "<button  title='Mostrar Detalles de Almacen' onclick='cargarDetallesAlmacen(" + full['id'] + ");' type='button' class='btn btn-sm btn-icon'><i class='fa fa-eye'></i></i></button>"

                        // var btnMostrarDetallePostulante = '<button class="btn btn-sm btn-icon" onclick="mostrarDetallePostulante(' + full['idpostulante'] + ')"><i class="bx bx-detail bx-sm"></i></button>'
                        return (
                            '<div class="d-inline-block text-nowrap">' +
                            btnMostrarDetallesUsuario +
                            btnMostrarOffcanvasEditar +
                            btnEliminarPostulante +
                            // btnMostrarDetallePostulante +
                            '</div>'
                        );
                    }
                }
            ],
            exportButtons: [{
                    format: 'print',
                    text: 'Imprimir'
                },
                {
                    format: 'csv',
                    text: 'Exportar CSV'
                },
                {
                    format: 'excel',
                    text: 'Exportar Excel'
                },
                {
                    format: 'pdf',
                    text: 'Exportar PDF'
                },
                {
                    format: 'copy',
                    text: 'Copiar Portapapeles'
                }
            ],
            exportColumns: [1, 2,3,4], // Modificar las columnas para exportar
            ajaxURL: "{{ route('admin.get.warehouses.data') }}",
            showRouteParam: "warehouses/show",
            editRouteParam: "warehouses/edit",
            deleteRouteParam: "warehouses/destroy",
            createRoute: ""
        };

        // Llamar a createDataTableConfig con los parámetros
        var dataTableConfig = ExportHelper.createDataTableConfig(configParams);
        $('#tableAlmacenDt').DataTable(dataTableConfig);
        var agregarAlmacen = $('<button>', {
            id: 'agregarAlmacen',
            class: 'btn btn-sm btn-label-primary px-3',
            style: 'padding: 5.5px;'
        }).appendTo($('#tableAlmacenDt_wrapper .dt-buttons'));
        $('<i>', {
            class: 'fas fa-plus'
        }).appendTo(agregarAlmacen);
        agregarAlmacen.append('Agregar');
        agregarAlmacen.on('click', function() {
            $("#addWarehouseModal").modal('show');
            $('#addWarehouseModalLabel').text('Agregar');
        });

        function cargarDetallesAlmacen(id) {
            console.log(id);
            $.ajax({
                url: '/warehouses/show/' + id,
                type: 'GET',
                success: function(response) {
                    var warehouseDetails = response.warehouse;
                    console.log(warehouseDetails);
                    $('#modalCourier').text(warehouseDetails.courier);
                    $('#modalGuide').text(warehouseDetails.guide);
                    $('#modalMasterBox').text(warehouseDetails.master_box);
                    $('#modalDispatchDate').text(warehouseDetails.dispatch_date);
                    $('#modalDeliveryDate').text(warehouseDetails.delivery_date);
                    $('#modalModelId').text(warehouseDetails.model_name);
                    $('#modalEquipmentId').text(warehouseDetails.serie);
                    $('#modalWarehouseStateTypeId').text(warehouseDetails.type_equipment_state);
                    $('#modalObservation').text(warehouseDetails.observation);

                    $("#warehouseModal").modal('show');
                },
                error: function(error) {
                    console.error('Error al obtener los detalles del almacén', error.responseJSON.error);
                }
            });
        }
        function cargarEditarAlmacen(id) {
            console.log(id);
            $.ajax({
                url: '/warehouses/show/' + id,
                type: 'GET',
                success: function(response) {
                    var warehouseDetails = response.warehouse;
                    console.log(warehouseDetails);
                    $('#warehouse_id').val(warehouseDetails.id);
                    $('#courierm').val(warehouseDetails.courier);
                    $('#guidem').val(warehouseDetails.guide);
                    $('#master_boxm').val(warehouseDetails.master_box);
                    $('#dispatch_datem').val(warehouseDetails.dispatch_date);
                    $('#delivery_datem').val(warehouseDetails.delivery_date);
                    $('#model_idm').val(warehouseDetails.model_id);
                    $('#equipment_idm').val(warehouseDetails.equipment_id);
                    $('#warehouse_state_type_idm').val(warehouseDetails.warehouse_state_type_id);
                    $('#observationm').val(warehouseDetails.observation);
                    var updateUrl = '/warehouses/update/' + id;
                    $('#editWarehouseForm').attr('action', updateUrl);
                    $("#editWarehouseModal").modal('show');
                },
                error: function(error) {
                    console.error('Error al obtener los detalles del almacén', error.responseJSON.error);
                }
            });
        }


        

    </script>
@endsection