@extends('layouts.horizontal', ['title' => 'Doctores'])

@vite(['resources/js/pages/custom-table.js'])

@section('content')
<div class="container-fluid">

@include('layouts.partials.page-title', [
    'subtitle' => 'Doctores',
    'title' => 'Listado de Doctores'
])

@if (session('ok'))
    <div class="alert alert-success">
        {{ session('ok') }}
    </div>
@elseif (session('expediente_already_exist'))
    <div class="alert alert-warning">
        {{ session('expediente_already_exist') }}
    </div>
@endif

<div data-table data-table-rows-per-page="20" class="card">

    {{-- HEADER --}}
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="card-title m-0">Doctores / Técnicos</h4>

        @permiso('doctores-crud.crear')
        <a href="{{ route('doctores.create') }}" class="btn btn-primary btn-sm">
            <i class="ti ti-plus"></i> Nuevo Doctor
        </a>
        @endpermiso
    </div>

    {{-- BUSCADOR --}}
    <div class="card-header border-light justify-content-between d-flex">

        <div class="d-flex gap-2">
            <div class="app-search">
                <input
                    id="search-doctor"
                    data-table-search
                    type="text"
                    class="form-control"
                    placeholder="Buscar doctor..."
                >

                <i data-lucide="search"
                   class="app-search-icon text-muted"></i>
            </div>
        </div>

        <div>
            <select
                data-table-set-rows-per-page
                class="form-select form-control my-1 my-md-0"
            >
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100" selected>100</option>
                <option value="200">200</option>
            </select>
        </div>

    </div>

    {{-- TABLA --}}
    <div class="table-responsive">

        <table
            class="table table-custom table-hover mb-0"
            id="tabla-doctores"
        >

            <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                <tr class="text-uppercase fs-xxs">
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Teléfono</th>
                    <th class="text-center">Color</th>
                    <th class="text-center">Tipo</th>
                    <th class="text-center">Origen</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>

            <tbody>

            @forelse($doctores as $d)

                <tr>

                    <td>
                        <strong>{{ $d->nombre_completo }}</strong>
                    </td>

                    <td>
                        {{ $d->correo ?? '-' }}
                    </td>

                    <td>
                        {{ $d->telefono ?? '-' }}
                    </td>

                    {{-- COLOR --}}
                    <td class="text-center">
                        <div
                            class="mx-auto"
                            style="
                                width:22px;
                                height:22px;
                                border-radius:4px;
                                background: {{ $d->color }};
                            "
                        ></div>
                    </td>

                    {{-- TIPO --}}
                    <td class="text-center">

                        @if($d->tecnico == 1)

                            <span class="badge bg-secondary">
                                Ejecutor
                            </span>

                        @else

                            @if($d->tipo == 1)

                                <span class="badge bg-primary">
                                    Generador
                                </span>

                            @elseif($d->tipo == 2)

                                <span class="badge bg-warning text-dark">
                                    Reportador
                                </span>

                            @endif

                        @endif

                    </td>

                    {{-- ORIGEN --}}
                    <td class="text-center">

                        @if($d->origen == 1)

                            <span class="badge bg-primary text-white">
                                Medytec
                            </span>

                        @else

                            <span class="badge bg-success text-white">
                                Externo
                            </span>

                        @endif

                    </td>

                    {{-- ACCIONES --}}
                    <td class="text-center">

                        <div class="d-flex justify-content-center gap-1">

                            @permiso('doctores-crud.editar')
                            <a
                                href="{{ route('doctores.edit', $d->idDoctor) }}"
                                class="btn btn-light btn-icon btn-sm rounded-circle"
                                title="Editar"
                            >
                                <i class="ti ti-edit fs-lg"></i>
                            </a>
                            @endpermiso


                            @permiso('doctores-crud.autorizar')
                            <a
                                href="{{ route('doctores.bloqueos.index', $d->idDoctor) }}"
                                class="btn btn-outline-warning btn-icon btn-sm rounded-circle"
                                title="Bloqueos / Horarios"
                            >
                                <i class="ti ti-calendar-x fs-lg"></i>
                            </a>
                            @endpermiso


                            @permiso('doctores-crud.eliminar')
                            <form
                                action="{{ route('doctores.destroy', $d->idDoctor) }}"
                                method="POST"
                                class="d-inline"
                                onsubmit="return confirm('¿Eliminar doctor/técnico?')"
                            >

                                @csrf
                                @method('DELETE')

                                <button
                                    type="submit"
                                    class="btn btn-danger btn-icon btn-sm rounded-circle"
                                    title="Eliminar"
                                >
                                    <i class="ti ti-trash fs-lg"></i>
                                </button>

                            </form>
                            @endpermiso

                        </div>

                    </td>

                </tr>

            @empty

                <tr>
                    <td
                        colspan="7"
                        class="text-center text-muted"
                    >
                        Sin doctores registrados
                    </td>
                </tr>

            @endforelse

            </tbody>

        </table>

    </div>


    {{-- PAGINACIÓN IGUAL A PACIENTES --}}
    <div class="card-footer border-0">

        <div class="d-flex justify-content-between align-items-center">

            <div data-table-pagination-info></div>

            <div data-table-pagination></div>

        </div>

    </div>

</div>

</div>
@endsection


@push('scripts')

<script>

window.PERMISOS = {

    doctorEditar:
        @json(auth('admin')->user()->tienePermiso('doctores-crud.editar')),

    doctorEliminar:
        @json(auth('admin')->user()->tienePermiso('doctores-crud.eliminar')),

    doctorBloqueos:
        @json(auth('admin')->user()->tienePermiso('doctores-crud.autorizar')),

};

</script>


<script>

document.addEventListener('DOMContentLoaded', () => {

    const input = document.querySelector('#search-doctor');
    const tbody = document.querySelector('#tabla-doctores tbody');

    let timer = null;


    input.addEventListener('input', e => {

        clearTimeout(timer);

        const term = e.target.value.trim();


        /*
        |--------------------------------------------------------------------------
        | Mínimo 2 caracteres
        |--------------------------------------------------------------------------
        */

        if (term.length < 2) {
            return;
        }


        tbody.innerHTML = `
            <tr>
                <td colspan="7"
                    class="text-center text-muted">
                    Buscando...
                </td>
            </tr>
        `;


        timer = setTimeout(() => {

            fetch(`/api/doctores/buscar?q=${encodeURIComponent(term)}`)

                .then(res => res.json())

                .then(rows => {

                    if (!rows.length) {

                        tbody.innerHTML = `
                            <tr>
                                <td colspan="7"
                                    class="text-center text-muted">
                                    Sin resultados
                                </td>
                            </tr>
                        `;

                        return;
                    }


                    tbody.innerHTML = rows.map(d => {


                        /*
                        |--------------------------------------------------------------------------
                        | Tipo
                        |--------------------------------------------------------------------------
                        */

                        let tipo = '';

                        if (d.tecnico == 1) {

                            tipo = `
                                <span class="badge bg-secondary">
                                    Ejecutor
                                </span>
                            `;

                        } else if (d.tipo == 1) {

                            tipo = `
                                <span class="badge bg-primary">
                                    Generador
                                </span>
                            `;

                        } else if (d.tipo == 2) {

                            tipo = `
                                <span class="badge bg-warning text-dark">
                                    Reportador
                                </span>
                            `;

                        }


                        /*
                        |--------------------------------------------------------------------------
                        | Origen
                        |--------------------------------------------------------------------------
                        */

                        const origen = d.origen == 1
                            ? `
                                <span class="badge bg-primary text-white">
                                    Medytec
                                </span>
                            `
                            : `
                                <span class="badge bg-success text-white">
                                    Externo
                                </span>
                            `;


                        /*
                        |--------------------------------------------------------------------------
                        | Fila
                        |--------------------------------------------------------------------------
                        */

                        return `

                            <tr>

                                <td>
                                    <strong>
                                        ${d.nombre_completo || '-'}
                                    </strong>
                                </td>

                                <td>
                                    ${d.correo || '-'}
                                </td>

                                <td>
                                    ${d.telefono || '-'}
                                </td>


                                <td class="text-center">

                                    <div
                                        class="mx-auto"
                                        style="
                                            width:22px;
                                            height:22px;
                                            border-radius:4px;
                                            background:${d.color || '#cccccc'};
                                        "
                                    ></div>

                                </td>


                                <td class="text-center">
                                    ${tipo}
                                </td>


                                <td class="text-center">
                                    ${origen}
                                </td>


                                <td class="text-center">

                                    <div class="d-flex justify-content-center gap-1">


                                        ${window.PERMISOS.doctorEditar ? `

                                            <a
                                                href="/doctores/${d.idDoctor}/edit"
                                                class="btn btn-light btn-icon btn-sm rounded-circle"
                                                title="Editar"
                                            >

                                                <i class="ti ti-edit fs-lg"></i>

                                            </a>

                                        ` : ''}


                                        ${window.PERMISOS.doctorBloqueos ? `

                                            <a
                                                href="/doctores/${d.idDoctor}/bloqueos"
                                                class="btn btn-outline-warning btn-icon btn-sm rounded-circle"
                                                title="Bloqueos / Horarios"
                                            >

                                                <i class="ti ti-calendar-x fs-lg"></i>

                                            </a>

                                        ` : ''}


                                        ${window.PERMISOS.doctorEliminar ? `

                                            <form
                                                action="/doctores/${d.idDoctor}"
                                                method="POST"
                                                class="d-inline"
                                                onsubmit="return confirm('¿Eliminar doctor/técnico?')"
                                            >

                                                <input
                                                    type="hidden"
                                                    name="_token"
                                                    value="${document.querySelector('meta[name="csrf-token"]').getAttribute('content')}"
                                                >

                                                <input
                                                    type="hidden"
                                                    name="_method"
                                                    value="DELETE"
                                                >


                                                <button
                                                    type="submit"
                                                    class="btn btn-danger btn-icon btn-sm rounded-circle"
                                                    title="Eliminar"
                                                >

                                                    <i class="ti ti-trash fs-lg"></i>

                                                </button>

                                            </form>

                                        ` : ''}


                                    </div>

                                </td>

                            </tr>

                        `;

                    }).join('');

                })

                .catch(() => {

                    tbody.innerHTML = `
                        <tr>
                            <td colspan="7"
                                class="text-center text-danger">
                                Error al buscar
                            </td>
                        </tr>
                    `;

                });

        }, 400);

    });

});

</script>

@endpush