@extends('layouts.master')

@section('title')
    Tarifas
@endsection

@section('content')

@component('components.breadcrumb')
    @slot('li_1') Inicio @endslot
    @slot('li_2') Panel Facturación @endslot
    @slot('title') Tarifas @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">

                {{-- BOTÓN ORIGINAL --}}
                <button type="button"
                        class="btn btn-primary btn-sm px-4 mt-0 mb-3"
                        data-bs-toggle="modal"
                        data-bs-target="#modalCrearTarifa">
                    <i class="fas fa-plus"></i>
                    Nueva Tarifa
                </button>

                <div class="table-responsive">

                    <table id="tablaSectores"
                           class="table table-striped mb-0 table-hover w-100">

                        <thead class="table-light">
                            <tr>
                                <th>Categoría</th>
                                <th>Tipo de Cobro</th>
                                <th>Monto Fijo</th>
                                <th>Monto Variable</th>
                                <th>Vigencia</th>
                                <th>Estado</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($tarifas as $t)

                                @php
                                    $tipoCobro = $t->tipo_cobro ?? 'FIJO_BLOQUE';

                                    $fechaInicio = $t->vigencia_inicio
                                        ? \Carbon\Carbon::parse($t->vigencia_inicio)->format('Y-m-d')
                                        : '';

                                    $fechaFin = $t->vigencia_fin
                                        ? \Carbon\Carbon::parse($t->vigencia_fin)->format('Y-m-d')
                                        : '';
                                @endphp

                                <tr>

                                    <td>
                                        {{ $t->categoriaTarifa->nombre_categoria ?? '-' }}
                                    </td>

                                    {{-- NUEVO CAMPO --}}
                                    <td>
                                        @if ($tipoCobro === 'SOLO_CONSUMO')
                                            <span class="badge bg-info">
                                                Solo consumo
                                            </span>
                                        @else
                                            <span class="badge bg-primary">
                                                Fijo + excedente
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        S/ {{ number_format($t->monto_fijo, 2) }}
                                    </td>

                                    <td>
                                        S/ {{ number_format($t->monto_variable, 2) }}
                                    </td>

                                    <td>
                                        {{ $fechaInicio }}
                                        a
                                        {{ $fechaFin ?: 'Indefinida' }}
                                    </td>

                                    <td>
                                        {{ $t->estado }}
                                    </td>

                                    <td>

                                        <button type="button"
                                                class="btn btn-sm btn-warning btn-editar"
                                                data-id="{{ $t->id_tarifa }}"
                                                data-id_categoria="{{ $t->id_categoria_tarifa }}"
                                                data-tipo_cobro="{{ $tipoCobro }}"
                                                data-fijo="{{ $t->monto_fijo }}"
                                                data-variable="{{ $t->monto_variable }}"
                                                data-inicio="{{ $fechaInicio }}"
                                                data-fin="{{ $fechaFin }}"
                                                data-estado="{{ $t->estado }}"
                                                data-bs-toggle="modal"
                                                data-bs-target="#modalEditarTarifa">

                                            <i class="las la-edit"></i>
                                        </button>

                                        <button type="button"
                                                class="btn btn-sm btn-danger btn-eliminar"
                                                data-id="{{ $t->id_tarifa }}">

                                            <i class="las la-trash"></i>
                                        </button>

                                    </td>

                                </tr>
                            @endforeach
                        </tbody>

                    </table>

                </div>

            </div>
        </div>
    </div>
</div>


{{-- ======================================================
     MODAL CREAR TARIFA
====================================================== --}}

<div class="modal fade" id="modalCrearTarifa" tabindex="-1">

    <div class="modal-dialog">

        <form id="formCrearTarifa" class="modal-content">

            @csrf

            <div class="modal-header">
                <h5 class="modal-title">
                    Nueva Tarifa
                </h5>
            </div>

            <div class="modal-body">

                {{-- CATEGORÍA --}}
                <div class="mb-2">

                    <label class="form-label">
                        Categoría
                    </label>

                    <select name="id_categoria_tarifa"
                            class="form-select"
                            required>

                        <option value="">Seleccione</option>

                        @foreach ($categorias as $c)

                            <option value="{{ $c->id_categoria_tarifa }}">
                                {{ $c->nombre_categoria }}
                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- NUEVO: TIPO DE COBRO --}}
                <div class="mb-2">

                    <label class="form-label">
                        Tipo de Cobro
                    </label>

                    <select name="tipo_cobro"
                            class="form-select"
                            required>

                        <option value="FIJO_BLOQUE" selected>
                            Monto fijo + excedente
                        </option>

                        <option value="SOLO_CONSUMO">
                            Solo por consumo (m³)
                        </option>

                    </select>

                    <small class="text-muted">
                        Seleccione cómo se calculará el recibo.
                    </small>

                </div>


                {{-- MONTO FIJO --}}
                <div class="mb-2">

                    <label>
                        Monto Fijo
                    </label>

                    <input type="number"
                           step="0.01"
                           min="0"
                           name="monto_fijo"
                           class="form-control"
                           required>

                </div>


                {{-- MONTO VARIABLE --}}
                <div class="mb-2">

                    <label>
                        Monto Variable (por m³)
                    </label>

                    <input type="number"
                           step="0.01"
                           min="0"
                           name="monto_variable"
                           class="form-control"
                           required>

                </div>


                {{-- VIGENCIA INICIO --}}
                <div class="mb-2">

                    <label>
                        Vigencia Inicio
                    </label>

                    <input type="date"
                           name="vigencia_inicio"
                           class="form-control"
                           required>

                </div>


                {{-- VIGENCIA FIN --}}
                <div class="mb-2">

                    <label>
                        Vigencia Fin
                    </label>

                    <input type="date"
                           name="vigencia_fin"
                           class="form-control">

                </div>


                {{-- ESTADO --}}
                <div class="mb-2">

                    <label>
                        Estado
                    </label>

                    <select name="estado" class="form-select">

                        <option value="Activo">
                            Activo
                        </option>

                        <option value="Inactivo">
                            Inactivo
                        </option>

                    </select>

                </div>

            </div>


            <div class="modal-footer">

                <button type="submit" class="btn btn-primary">
                    Guardar
                </button>

                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                    Cancelar
                </button>

            </div>

        </form>

    </div>
</div>


{{-- ======================================================
     MODAL EDITAR TARIFA
====================================================== --}}

<div class="modal fade" id="modalEditarTarifa" tabindex="-1">

    <div class="modal-dialog">

        <form id="formEditarTarifa" class="modal-content">

            @csrf
            @method('PUT')

            <input type="hidden" id="edit_id">

            <div class="modal-header">

                <h5 class="modal-title">
                    Editar Tarifa
                </h5>

            </div>

            <div class="modal-body">


                {{-- CATEGORÍA --}}
                <div class="mb-2">

                    <label class="form-label">
                        Categoría
                    </label>

                    <select name="id_categoria_tarifa"
                            id="edit_categoria"
                            class="form-select"
                            required>

                        @foreach ($categorias as $c)

                            <option value="{{ $c->id_categoria_tarifa }}">
                                {{ $c->nombre_categoria }}
                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- NUEVO: TIPO DE COBRO --}}
                <div class="mb-2">

                    <label class="form-label">
                        Tipo de Cobro
                    </label>

                    <select name="tipo_cobro"
                            id="edit_tipo_cobro"
                            class="form-select"
                            required>

                        <option value="FIJO_BLOQUE">
                            Monto fijo + excedente
                        </option>

                        <option value="SOLO_CONSUMO">
                            Solo por consumo (m³)
                        </option>

                    </select>

                </div>


                {{-- MONTO FIJO --}}
                <div class="mb-2">

                    <label>
                        Monto Fijo
                    </label>

                    <input type="number"
                           step="0.01"
                           min="0"
                           name="monto_fijo"
                           id="edit_fijo"
                           class="form-control"
                           required>

                </div>


                {{-- MONTO VARIABLE --}}
                <div class="mb-2">

                    <label>
                        Monto Variable
                    </label>

                    <input type="number"
                           step="0.01"
                           min="0"
                           name="monto_variable"
                           id="edit_variable"
                           class="form-control"
                           required>

                </div>


                {{-- VIGENCIA INICIO --}}
                <div class="mb-2">

                    <label>
                        Vigencia Inicio
                    </label>

                    <input type="date"
                           name="vigencia_inicio"
                           id="edit_inicio"
                           class="form-control"
                           required>

                </div>


                {{-- VIGENCIA FIN --}}
                <div class="mb-2">

                    <label>
                        Vigencia Fin
                    </label>

                    <input type="date"
                           name="vigencia_fin"
                           id="edit_fin"
                           class="form-control">

                </div>


                {{-- ESTADO --}}
                <div class="mb-2">

                    <label>
                        Estado
                    </label>

                    <select name="estado"
                            id="edit_estado"
                            class="form-select">

                        <option value="Activo">
                            Activo
                        </option>

                        <option value="Inactivo">
                            Inactivo
                        </option>

                    </select>

                </div>

            </div>


            <div class="modal-footer">

                <button type="submit"
                        class="btn btn-warning">
                    Actualizar
                </button>

                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                    Cancelar
                </button>

            </div>

        </form>

    </div>
</div>

@endsection


@section('script')

{{-- DATATABLES --}}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<link rel="stylesheet"
      href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


{{-- ======================================================
     DATATABLE
====================================================== --}}

<script>

$(document).ready(function () {

    $("#tablaSectores").DataTable({

        responsive: true,
        lengthChange: true,
        autoWidth: false,

        buttons: [
            {
                extend: 'collection',

                text: 'Opciones',

                buttons: [

                    {
                        extend: 'copy',
                        text: 'Copiar'
                    },

                    {
                        extend: 'csv',
                        text: 'CSV'
                    },

                    {
                        extend: 'excel',
                        text: 'Excel',
                        title: 'Tarifas'
                    },

                    {
                        extend: 'pdf',
                        text: 'PDF',
                        title: 'Tarifas'
                    },

                    {
                        extend: 'print',
                        text: 'Imprimir'
                    }
                ]
            },

            {
                extend: 'colvis',
                text: 'Visibilidad de Columna'
            }
        ],

        paging: true,
        searching: true,
        info: true,

        language: {

            search: 'Buscar:',

            lengthMenu: 'Mostrar _MENU_ registros por página',

            info: 'Mostrando _START_ a _END_ de _TOTAL_ entradas',

            paginate: {
                first: 'Primero',
                previous: 'Anterior',
                next: 'Siguiente',
                last: 'Último'
            }
        }

    }).buttons().container()
      .appendTo('#tablaSectores_wrapper .col-md-6:eq(0)');

});

</script>


{{-- ======================================================
     AJAX CREAR / EDITAR / ELIMINAR
====================================================== --}}

<script>

$(function () {

    /*
    |--------------------------------------------------------------------------
    | MOSTRAR ERRORES
    |--------------------------------------------------------------------------
    */

    function mostrarErrores(xhr) {

        let mensaje = 'Error inesperado.';

        if (xhr.responseJSON?.errors) {

            mensaje = Object.values(
                xhr.responseJSON.errors
            ).flat().join('\n');

        } else if (xhr.responseJSON?.message) {

            mensaje = xhr.responseJSON.message;
        }

        Swal.fire({
            title: 'Error',
            text: mensaje,
            icon: 'error'
        });
    }


    /*
    |--------------------------------------------------------------------------
    | CREAR TARIFA
    |--------------------------------------------------------------------------
    */

    $('#formCrearTarifa').submit(function (e) {

        e.preventDefault();

        $.post(
            "{{ route('tarifas.store') }}",
            $(this).serialize()
        )

        .done(() => {

            $('#modalCrearTarifa').modal('hide');

            Swal.fire(
                'Registrado',
                'Tarifa creada correctamente',
                'success'
            ).then(() => location.reload());

        })

        .fail(mostrarErrores);

    });


    /*
    |--------------------------------------------------------------------------
    | CARGAR DATOS PARA EDITAR
    |--------------------------------------------------------------------------
    */

    $('.btn-editar').click(function () {

        $('#edit_id').val(
            $(this).data('id')
        );

        $('#edit_categoria').val(
            $(this).data('id_categoria')
        );

        // NUEVO CAMPO
        $('#edit_tipo_cobro').val(
            $(this).attr('data-tipo_cobro') || 'FIJO_BLOQUE'
        );

        $('#edit_fijo').val(
            $(this).data('fijo')
        );

        $('#edit_variable').val(
            $(this).data('variable')
        );

        $('#edit_inicio').val(
            $(this).data('inicio')
        );

        $('#edit_fin').val(
            $(this).data('fin')
        );

        $('#edit_estado').val(
            $(this).data('estado')
        );

    });


    /*
    |--------------------------------------------------------------------------
    | ACTUALIZAR TARIFA
    |--------------------------------------------------------------------------
    */

    $('#formEditarTarifa').submit(function (e) {

        e.preventDefault();

        let id = $('#edit_id').val();

        $.ajax({

            url: "{{ url('/tarifas') }}/" + encodeURIComponent(id),

            method: 'POST',

            data: $(this).serialize(),

            success: () => {

                $('#modalEditarTarifa').modal('hide');

                Swal.fire(
                    'Actualizado',
                    'Tarifa modificada correctamente',
                    'success'
                ).then(() => location.reload());

            },

            error: mostrarErrores

        });

    });


    /*
    |--------------------------------------------------------------------------
    | ELIMINAR TARIFA
    |--------------------------------------------------------------------------
    */

    $('.btn-eliminar').click(function () {

        let id = $(this).data('id');

        Swal.fire({

            title: '¿Eliminar tarifa?',

            text: 'Esta acción no se puede deshacer',

            icon: 'warning',

            showCancelButton: true,

            confirmButtonText: 'Sí, eliminar',

            cancelButtonText: 'Cancelar'

        }).then(result => {

            if (result.isConfirmed) {

                $.ajax({

                    url: "{{ url('/tarifas') }}/" + encodeURIComponent(id),

                    method: 'POST',

                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'DELETE'
                    },

                    success: () => {

                        Swal.fire(
                            'Eliminado',
                            'Tarifa eliminada correctamente',
                            'success'
                        ).then(() => location.reload());

                    },

                    error: mostrarErrores

                });
            }

        });

    });

});

</script>

@endsection