@extends('layout.administrator.index')
@section('title', 'Samples')

@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}"><i class="fa fa-dashboard"></i>
                        Inicio</a></li>
                <li class="breadcrumb-item active">Samples</li>
            </ol>
        </section>

        <section class="content">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if (session('danger'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('danger') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            <div id="boxfilter" class="box box-solid bg_dark hide">
                <div class="box-header with-border">
                    <div class="row align-items-center">
                        <div class="col-12">
                            <h4 class="box-title">Busqueda</h4>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <form action="{{ route('administrator.import.test') }}" method="get" files="true"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="sampleId" class="control-label">Sample ID</label>
                                    <input type="text" name="sampleId" id="sampleId" class="form-control"
                                        placeholder="Sample ID" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="unitId" class="control-label">Unit ID</label>
                                    <input type="text" name="unitId" id="unitId" class="form-control"
                                        placeholder="Unit ID" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="customer" class="control-label">Cliente</label>
                                    <input type="text" name="customer" id="customer" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="account" class="control-label">Account</label>
                                    <select class="form-control" id="account" name="account">
                                        <option value="">TODOS</option>
                                        @foreach ($accounts as $account)
                                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="model" class="control-label">Modelo</label>
                                    <input type="text" name="model" id="model" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="idComponent" class="control-label">Componente</label>
                                    <select class="form-control select2" id="idComponent" name="component">
                                        <option value="">Todos</option>
                                        @foreach ($components as $component)
                                            <option value="{{ $component->component }}">{{ $component->component }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="idSos" class="control-label">SOS</label>
                                    <select class="form-control select2" id="idSos" name="sos">
                                        <option value="">Todos</option>
                                        <option value="true">SOS</option>
                                        <option value="false">Estandar</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="idOilReference" class="control-label">Date taken</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control pull-right" id="idSampleDateTaken"
                                            name="sample_date_taken" autocomplete="off">
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-danger" id="btnSampleDateTaken"><i
                                                    class="fa fa-times"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="idOilReference" class="control-label">Date Received</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control pull-right" id="idSampleDateReceived"
                                            name="sample_date_received" autocomplete="off">
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-danger" id="btnSampleDateReceived"><i
                                                    class="fa fa-times"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-left">
                                <a href="{{ route('administrator.import.test') }}" class="btn btn-danger"><i
                                        class="fa fa-refresh" aria-hidden="true"></i> Limpiar</a>
                            </div>
                            <div class="col-md-6 text-right">
                                <button type="submit" class="btn btn-info"><i class="fa fa-search"
                                        aria-hidden="true"></i>
                                    Buscar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="box">
                <div class="box-header with-border">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <h4 class="box-title font-weight-bold">Samples</h4>
                        </div>
                        <div class="col-6">
                            <div class="box-controls pull-right">
                                <div class="box-header-actions">
                                    <form action="{{ route('administrator.import.test.show') }}" method="get">
                                        <div class="input-group input-group-sm">
                                            <input type="text" name="code" class="form-control"
                                                placeholder="Ej: O-47, O-45" required>
                                            <div class="input-group-append">
                                                <button type="submit" class="btn btn-sm btn-success">Buscar</button>
                                            </div>
                                        </div>
                                    </form>
                                    <button type="button" class="btn btn-sm btn-info" id="filtro"><i
                                            class="fa fa-filter"></i> Filtro</button>
                                    @if (in_array(session('labTest'), [8, 9]))
                                        <button type="button" class="btn btn-sm btn-info" data-toggle="modal"
                                            data-target="#uploadModal">
                                            <i class="fa fa-upload" aria-hidden="true"></i> Importar Resultados
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <table class="table table-sm table-hover table-responsive" id="tableHistory">
                            <thead>
                                <tr>
                                    <th class="text-center">Tipo de Fluido</th>
                                    <th class="text-center">Sample ID</th>
                                    <th class="text-center">Cliente</th>
                                    <th class="text-center">Account</th>
                                    <th class="text-center">Unit ID</th>
                                    <th class="text-center">Modelo</th>
                                    <th class="text-center">Componente</th>
                                    <th class="text-center">Oil reference</th>
                                    <th class="text-center">Oil weight</th>
                                    <th class="text-center">Date taken</th>
                                    <th class="text-center">Date received</th>
                                    <th class="text-center">State</th>
                                    <th class="text-center">SOS</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="text-center"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <!-- Modal para importar archivo -->
        <div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-info p-20">
                        <h5 class="modal-title" id="uploadModalLabel">
                            <i class="fa fa-upload"></i> Importar Resultados de Muestras
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{ route('administrator.import.test.upload') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i> Descarga la plantilla, complétala con los resultados de
                                las muestras y súbela nuevamente.
                            </div>

                            <div class="form-group">
                                <label for="fileUpload" class="control-label mb-1">Seleccionar archivo</label>
                                <div class="custom-file d-block p-10 bg-light text-dark border border-primary"
                                    style="height: auto;">
                                    <input type="file" class="custom-file-input d-none" id="fileUpload"
                                        name="file" accept=".xlsx,.xls,.csv" required>
                                    <label class="custom-file-label mb-0" for="fileUpload">Seleccionar archivo...</label>
                                </div>
                                <small class="form-text text-muted">
                                    Formatos permitidos: Excel (.xlsx, .xls)
                                </small>
                            </div>

                            <div class="mt-3">
                                <a href="{{ route('administrator.import.test.template') }}"
                                    class="btn btn-sm btn-success">
                                    <i class="fa fa-download"></i> Descargar Plantilla
                                </a>
                            </div>
                        </div>
                        <div class="modal-footer py-20 d-flex justify-content-between">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                <i class="fa fa-times"></i> Cancelar
                            </button>
                            <button type="submit" class="btn btn-info">
                                <i class="fa fa-upload"></i> Subir Archivo
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        var tableHistory = $('#tableHistory').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            pageLength: 80,
            ajax: {
                url: "{{ route('administrator.import.test.data') }}",
                data: function(d) {
                    d.sampleId = $('#sampleId').val();
                    d.unitId = $('#unitId').val();
                    d.customer = $('#customer').val();
                    d.account = $('#account').val();
                    d.model = $('#model').val();
                    d.component = $('#idComponent').val();
                    d.state = $('#idState').val();
                    d.sos = $('#idSos').val();
                    d.sample_date_taken = $('#idSampleDateTaken').val();
                    d.sample_date_received = $('#idSampleDateReceived').val();
                }
            },
            // default order (date taken desc)
            order: [
                [9, 'desc']
            ],
            columns: [{
                    data: 'fluid',
                    name: 'fluid'
                },
                {
                    data: 'sample_id',
                    name: 'sample_id',
                    render: function(data, type, row) {
                        return `
                <a href="{{ route('administrator.import.test.show') }}?code=` + data + `">
                #` + data + `
                </a>
            `;
                    }
                },
                {
                    data: 'customer',
                    name: 'customer'
                },
                {
                    data: 'account',
                    name: 'account'
                },
                {
                    data: 'unit_id',
                    name: 'unit_id'
                },
                {
                    data: 'model',
                    name: 'model'
                },
                {
                    data: 'component',
                    name: 'component'
                },
                {
                    data: 'oil_reference',
                    name: 'oil_reference'
                },
                {
                    data: 'oil_weight',
                    name: 'oil_weight'
                },
                {
                    data: 'date_taken',
                    name: 'date_taken'
                },
                {
                    data: 'date_received',
                    name: 'date_received'
                },
                {
                    data: 'state',
                    name: 'state'
                },
                {
                    data: 'sos',
                    name: 'sos',
                    render: function(data, type, row) {
                        return data ? '<span class="badge badge-danger">SOS</span>' :
                            '<span class="badge badge-dark">Estándar</span>';
                    }
                },
                {
                    data: 'acciones',
                    name: 'acciones',
                    render: function (data, type, row) {
                        let deleteUrl = `{{ route('samples.destroy') }}`
                        return `

                            <button class="btn btn-danger btn-sm ms-2"
                                onclick="confirmDelete('${deleteUrl}')">
                                Eliminar
                            </button>

                            <form action="${deleteUrl}" method="POST"
                                style="display:inline;"
                                onsubmit="return confirm('¿Seguro que deseas eliminar este registro?')">

                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <input type="hidden" name="_method" value="DELETE">
                                <input type="hidden" name="sample_id" value="${row.sample_id}">
                            </form>
                        `;
                    }
                },

                
            ]
        });


        // Reload table when filter form is submitted
        $('#boxfilter form').on('submit', function(e) {
            e.preventDefault();
            tableHistory.ajax.reload();
        });

        // Reload table when selects or inputs change
        $('#sampleId, #unitId, #idComponent, #idState, #idSos, #customer, #account, #model').on('change', function() {
            tableHistory.ajax.reload();
        });

        // Clear date filters and reload
        $('#btnSampleDateTaken').on('click', function() {
            $('#idSampleDateTaken').val('');
        });

        $('#btnSampleDateReceived').on('click', function() {
            $('#idSampleDateReceived').val('');
        });

        $('#idSampleDateTaken').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        });

        $('#idSampleDateTaken').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        });

        $('#idSampleDateTaken').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });

        $('#idSampleDateReceived').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        });

        $('#idSampleDateReceived').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        });

        $('#idSampleDateReceived').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });

        $('#filtro').click(() => {
            $("#boxfilter").slideToggle("slow");
        });

        // Script para mostrar el nombre del archivo seleccionado
        $('#fileUpload').on('change', function() {
            var fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').html(fileName);
        });
    </script>

    <script>
    function confirmDelete(url) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: 'Este registro será eliminado',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                let form = document.querySelector(`form[action="${url}"]`);
                form.submit();
            }
        });
    }
    </script>
@endsection