@extends('layouts.app')

@section('content')
    <div class="toolbar pb-lg-3" id="kt_toolbar">
        <div id="kt_toolbar_container" class="container-xxl d-flex flex-stack flex-wrap">
            <div class="page-title d-flex flex-column me-3">
                <h1 class="d-flex text-white fw-bold my-1 fs-3">Movimientos</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-1">
                    <li class="breadcrumb-item text-white opacity-75">
                        <a href="{{ route('expenses.index') }}" class="text-white text-hover-primary">Registros</a>
                    </li>
                    <li class="breadcrumb-item">
                        <span class="bullet bg-white opacity-75 w-5px h-2px"></span>
                    </li>
                    <li class="breadcrumb-item text-white opacity-75">Listado</li>
                </ul>
            </div>
            <div class="d-flex align-items-center py-3 py-md-1">
                @if(request('date_from') && request('date_to'))
                    <a href="{{ route('expenses.export', request()->query()) }}" class="btn bg-body btn-active-color-primary me-2">
                        <i class="ki-duotone ki-file-down fs-6 text-muted me-1">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i> Exportar
                    </a>
                @else
                    <span class="btn bg-body text-muted me-2 disabled" title="Seleccione un rango de fechas (Desde y Hasta) para exportar">
                        <i class="ki-duotone ki-file-down fs-6 me-1">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i> Exportar
                    </span>
                @endif
                <a href="#" class="btn bg-body btn-active-color-primary me-2" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <i class="ki-duotone ki-filter fs-6 text-muted me-1">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i> Filtrar
                </a>
                <div class="menu menu-sub menu-sub-dropdown w-400px w-md-400px p-0 m-0" data-kt-menu="true" id="kt_menu_6606384b2f261" style="z-index: 107; position: fixed; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-108px, -14.4px, 0px);" data-popper-placement="bottom-end">
                    <div class="d-flex flex-column" style="max-height: 70vh; overflow-y: auto;">
                        <div class="px-7 py-4 border-bottom">
                            <div class="fs-5 text-gray-900 fw-bold">Filtros</div>
                        </div>
                        <form method="GET" action="{{ route('expenses.index') }}" class="p-4">
                            <div class="row g-3">
                                <div class="col-4">
                                    <label class="form-label fw-semibold fs-7 mb-1">Buscar:</label>
                                    <input type="text" name="input_search" value="{{ request('input_search') }}" class="form-control form-control-sm" placeholder="Buscar movimiento" />
                                </div>
                                <div class="col-3">
                                    <label class="form-label fw-semibold fs-7 mb-1">ID:</label>
                                    <input type="text" name="expense_id" value="{{ request('expense_id') }}" class="form-control form-control-sm" placeholder="ID del movimiento" />
                                </div>
                                <div class="col-5">
                                    <label class="form-label fw-semibold fs-7 mb-1">Estado:</label>
                                    <select class="form-select form-select-sm" name="status" data-kt-select2="true" data-placeholder="Seleccionar" data-allow-clear="true">
                                        <option value="">Todos</option>
                                        <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Pendiente</option>
                                        <option value="2" {{ request('status') == '2' ? 'selected' : '' }}>Procesado</option>
                                        <option value="3" {{ request('status') == '3' ? 'selected' : '' }}>Conciliado</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold fs-7 mb-1">Tarjeta:</label>
                                    <select class="form-select form-select-sm" name="card_id" data-control="select2" data-placeholder="Seleccionar">
                                        <option value="">Todas</option>
                                        @foreach($banks as $bank)
                                            <optgroup label="{{ $bank->name }}">
                                                @foreach($bank->cards->where('status', true) as $card)
                                                    <option value="{{ $card->id }}" {{ request('card_id') == $card->id ? 'selected' : '' }}>
                                                        {{ $card->number }} - {{ $card->user->name }}
                                                    </option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold fs-7 mb-1">Proveedor:</label>
                                    {{ html()->select('supplier_id', $suppliers, request('supplier_id'))
                                        ->class('form-select form-select-sm')
                                        ->id('supplier_id')
                                        ->attribute('data-control', 'select2')
                                        ->attribute('data-placeholder', 'Seleccione un proveedor')
                                        ->placeholder('Seleccione un proveedor')
                                    }}
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold fs-7 mb-1">Concepto:</label>
                                    {{ html()->select('expense_concept_id', $expenseConcepts, request('expense_concept_id'))
                                        ->class('form-select form-select-sm')
                                        ->id('expense_concept_id')
                                        ->attribute('data-control', 'select2')
                                        ->attribute('data-placeholder', 'Seleccione un concepto')
                                        ->placeholder('Seleccione un concepto')
                                    }}
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-semibold fs-7 mb-1">Desde:</label>
                                    <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control form-control-sm" />
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-semibold fs-7 mb-1">Hasta:</label>
                                    <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control form-control-sm" />
                                </div>
                                <div class="col-12 d-flex justify-content-end mt-3">
                                    <a href="{{ route('expenses.index') }}" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Limpiar</a>
                                    <button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Aplicar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                @permission('expenses.delete-reports')
                    <div class="me-2">
                        <a href="#" class="btn btn-danger btn-active-color-white" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                            <i class="ki-duotone ki-trash-square fs-6 me-1">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                                <span class="path4"></span>
                            </i> Eliminados
                        </a>
                        <div class="menu menu-sub menu-sub-dropdown w-350px p-0" data-kt-menu="true">
                            <div class="d-flex flex-column">
                                <div class="px-6 py-4 border-bottom d-flex align-items-center gap-2">
                                    <i class="ki-duotone ki-trash-square fs-4 text-danger">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                    </i>
                                    <span class="fs-6 text-gray-900 fw-bold">Reporte de Eliminados</span>
                                </div>
                                <div class="p-5" id="deleted-report-form">
                                    <div class="mb-4">
                                        <p class="text-muted fs-7 mb-3">Seleccione el rango de fechas de eliminación para generar el reporte.</p>
                                        <div class="row g-3">
                                            <div class="col-6">
                                                <label class="form-label fw-semibold fs-7 mb-1">Desde:</label>
                                                <input type="date" id="deleted_date_from" class="form-control form-control-sm" />
                                            </div>
                                            <div class="col-6">
                                                <label class="form-label fw-semibold fs-7 mb-1">Hasta:</label>
                                                <input type="date" id="deleted_date_to" class="form-control form-control-sm" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2 justify-content-end">
                                        <a id="btn-deleted-excel" href="#"
                                           class="btn btn-sm btn-light-success disabled"
                                           data-base-url="{{ route('expenses.deleted.export-excel') }}">
                                            <i class="ki-duotone ki-file-down fs-4 me-1">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i>
                                            Excel
                                        </a>
                                        <a id="btn-deleted-pdf" href="#"
                                           class="btn btn-sm btn-light-danger disabled"
                                           data-base-url="{{ route('expenses.deleted.export-pdf') }}">
                                            <i class="ki-duotone ki-file-down fs-4 me-1">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i>
                                            PDF
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endpermission
                @permission('expenses.create')
                    <a href="{{ route('expenses.create') }}" class="btn bg-body btn-active-color-primary me-2">
                        <i class="ki-duotone ki-plus fs-2 me-2"></i>
                        Crear
                    </a>
                    <a href="{{ route('expenses.import') }}" class="btn btn-success">
                        <i class="ki-duotone ki-upload fs-2 me-2"></i>
                        Importar
                    </a>
                @endpermission
            </div>
        </div>
    </div>

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <!--begin::Row-->
            <div class="row row-cols-1 row-cols-md-3 g-4 mb-5">
                <!--begin::Col-->
                <div class="col-md-4">
                    <div class="card border border-danger border-2 bg-light-danger">
                        <div class="card-body py-3">
                            <div class="d-flex align-items-center mb-2">
                                <div class="symbol symbol-30px me-3">
                                    <div class="symbol-label bg-danger">
                                        <i class="ki-duotone ki-time fs-2 text-white">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </div>
                                </div>
                                <span class="fw-bold fs-6 text-danger">Pendientes</span>
                            </div>
                            <div class="fw-bold text-danger fs-2">{{ $totalPending }}</div>
                            <div class="text-danger opacity-75">{{ number_format($totalPendingAmount, 2, ',', '.') }}</div>
                        </div>
                    </div>
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-md-4">
                    <div class="card border border-success border-2 bg-light-success">
                        <div class="card-body py-3">
                            <div class="d-flex align-items-center mb-2">
                                <div class="symbol symbol-30px me-3">
                                    <div class="symbol-label bg-success">
                                        <i class="ki-duotone ki-check fs-2 text-white">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </div>
                                </div>
                                <span class="fw-bold fs-6 text-success">Procesados</span>
                            </div>
                            <div class="fw-bold text-success fs-2">{{ $totalProcessed }}</div>
                            <div class="text-success opacity-75">{{ number_format($totalProcessedAmount, 2, ',', '.') }}</div>
                        </div>
                    </div>
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-md-4">
                    <div class="card border border-primary border-2 bg-light-primary">
                        <div class="card-body py-3">
                            <div class="d-flex align-items-center mb-2">
                                <div class="symbol symbol-30px me-3">
                                    <div class="symbol-label bg-primary">
                                        <i class="ki-duotone ki-check-circle fs-2 text-white">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </div>
                                </div>
                                <span class="fw-bold fs-6 text-primary">Conciliados</span>
                            </div>
                            <div class="fw-bold text-primary fs-2">{{ $totalConciliated }}</div>
                            <div class="text-primary opacity-75">{{ number_format($totalConciliatedAmount, 2, ',', '.') }}</div>
                        </div>
                    </div>
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->

            <div class="card">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <div class="d-flex align-items-center position-relative my-1 flex-wrap gap-2">
                            @if(request('input_search'))
                                <span class="badge badge-light-danger fs-7">
                                    <i class="ki-duotone ki-magnifier fs-4 me-1"><span class="path1"></span><span class="path2"></span></i>
                                    "{{ request('input_search') }}"
                                </span>
                            @endif
                            @if(request('expense_id'))
                                <span class="badge badge-light-danger fs-7">
                                    <i class="ki-duotone ki-magnifier fs-4 me-1"><span class="path1"></span><span class="path2"></span></i>
                                    "{{ request('expense_id') }}"
                                </span>
                            @endif
                            @if(request('status'))
                                <span class="badge badge-light-primary fs-7">
                                    @switch(request('status'))
                                        @case(1) Pendiente @break
                                        @case(2) Procesado @break
                                        @case(3) Conciliado @break
                                    @endswitch
                                </span>
                            @endif
                            @if(request('card_id'))
                                <span class="badge badge-light-warning fs-7">
                                    {{ $cards[request('card_id')] ?? request('card_id') }}
                                </span>
                            @endif
                            @if(request('supplier_id'))
                                <span class="badge badge-light-info fs-7">
                                    {{ $suppliers[request('supplier_id')] ?? request('supplier_id') }}
                                </span>
                            @endif
                            @if(request('expense_concept_id'))
                                <span class="badge badge-light-success fs-7">
                                    {{ $expenseConcepts[request('expense_concept_id')] ?? request('expense_concept_id') }}
                                </span>
                            @endif
                            @if(request('date_from'))
                                <span class="badge badge-light-secondary fs-7">
                                    <i class="ki-duotone ki-calendar fs-4 me-1"><span class="path1"></span><span class="path2"></span></i>
                                    desde: {{ request('date_from') }}
                                </span>
                            @endif
                            @if(request('date_to'))
                                <span class="badge badge-light-secondary fs-7">
                                    <i class="ki-duotone ki-calendar fs-4 me-1"><span class="path1"></span><span class="path2"></span></i>
                                    hasta: {{ request('date_to') }}
                                </span>
                            @endif
                            @if(request('input_search') || request('status') || request('expense_id') || request('card_id') || request('date_from') || request('date_to') || request('supplier_id') || request('expense_concept_id'))
                                <a href="{{ route('expenses.index') }}" class="btn btn-sm btn-light btn-active-light-primary ms-2">
                                    <i class="ki-duotone ki-cross fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card-body py-4">
                    <div class="table-responsive">
                        <table class="table table-row-bordered table-row-gray-300 align-middle fs-6 gy-5">
                            <thead>
                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                    <th class="min-w-125px">Fecha</th>
                                    <th class="min-w-75px">ID</th>
                                    <th class="min-w-125px">Transacción</th>
                                    <th class="min-w-125px">Tarjeta</th>
                                    <th class="min-w-125px">Usuario</th>
                                    <th class="min-w-125px">Monto</th>
                                    <th class="min-w-125px">Estado</th>
                                    <th class="text-end min-w-100px">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold">
                                @forelse($expenses as $expense)
                                    <tr>
                                        <td>{{ $expense->date->format('d/m/Y') }}</td>
                                        <td>
                                            #{{ $expense->id }}
                                            @if($expense->parent_id)
                                                <span class="badge badge-light-info d-block mt-1">Hijo</span>
                                            @endif
                                        </td>
                                        <td>{{ $expense->transaction_number }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="ki-duotone ki-credit-cart fs-2 me-2 text-muted">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                                <span class="fw-bold">{{ $expense->card->number }}</span>
                                            </div>
                                            <div class="d-flex align-items-center mt-1">
                                                <i class="ki-duotone ki-bank fs-2 me-2 text-muted">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                                <span class="text-muted">{{ $expense->card->bank->name }}</span>
                                            </div>
                                            @if($expense->observation)
                                                <div class="d-flex align-items-center mt-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $expense->observation }}">
                                                    <i class="ki-duotone ki-information fs-2 me-2 text-info">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                    </i>
                                                    <span class="text-info fw-semibold">{{ $expense->observation }}</span>
                                                </div>
                                            @endif
                                        </td>
                                        <td>{{ $expense->user->name }}</td>
                                        <td>{{ number_format($expense->amount, 2, ',', '.') }}</td>
                                        <td>{!! $expense->status_badge !!}</td>
                                        <td class="text-end">
                                            <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                <i class="ki-duotone ki-setting-2 fs-5">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </a>
                                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                                                <div class="menu-item px-3">
                                                    <a href="{{ route('expenses.show', $expense) }}" class="menu-link px-3">
                                                        <i class="ki-duotone ki-eye fs-3 me-2"><span class="path1"></span><span class="path2"></span></i>
                                                        Ver
                                                    </a>
                                                </div>
                                                @permission('expenses.edit')
                                                    @if($expense->status == 1)
                                                        <div class="menu-item px-3">
                                                            <a href="{{ route('expenses.edit', $expense) }}" class="menu-link px-3">
                                                                <i class="ki-duotone ki-pencil fs-3 me-2"><span class="path1"></span><span class="path2"></span></i>
                                                                Editar
                                                            </a>
                                                        </div>
                                                    @endif
                                                @endpermission
                                                @if($expense->status == 2)
                                                    <div class="menu-item px-3">
                                                        <a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#conciliateModal{{ $expense->id }}">
                                                            <i class="ki-duotone ki-check-circle fs-3 me-2 text-success"><span class="path1"></span><span class="path2"></span></i>
                                                            Conciliar
                                                        </a>
                                                    </div>
                                                @endif
                                                @permission('expenses.delete')
                                                    @if($expense->status == 1)
                                                        <div class="menu-item px-3">
                                                            <form id="delete-form-{{ $expense->id }}" method="POST" action="{{ route('expenses.delete', $expense) }}">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="button" class="menu-link px-3 text-danger w-100" onclick="confirmDelete('delete-form-{{ $expense->id }}')">
                                                                    <i class="ki-duotone ki-trash fs-3 me-2"><span class="path1"></span><span class="path2"></span></i>
                                                                    Eliminar
                                                                </button>
                                                            </form>
                                                        </div>
                                                    @endif
                                                @endpermission
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No hay movimientos registrados.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex justify-content-center">
                        <div class="pagination">
                            {{ $expenses->appends(request()->query())->links() }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modals for conciliation -->
            @foreach($expenses as $expense)
                @if($expense->status == 2)
                    <div class="modal fade" id="conciliateModal{{ $expense->id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Conciliar Movimiento</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <form action="{{ route('expenses.conciliate', $expense) }}" method="POST">
                                        @csrf
                                        <div class="modal-body">
                                            <!-- Resumen amigable -->
                                            <div class="card card-flush bg-light mb-5">
                                                <div class="card-body py-4">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div>
                                                            <div class="text-muted fw-semibold">Monto</div>
                                                            <div class="fs-2 fw-bold text-gray-900">{{ number_format($expense->amount, 2, ',', '.') }}</div>
                                                        </div>
                                                        <div class="text-end">
                                                            <div class="text-muted fw-semibold">Fecha</div>
                                                            <div class="fw-bold">{{ $expense->date->format('d/m/Y') }}</div>
                                                        </div>
                                                    </div>

                                                    <div class="separator separator-dashed my-4"></div>

                                                    <div class="row g-3">
                                                        <div class="col-md-12">
                                                            <div class="d-flex align-items-start">
                                                                <div class="me-3">
                                                                    <i class="ki-duotone ki-credit-cart fs-2x text-primary">
                                                                        <span class="path1"></span>
                                                                        <span class="path2"></span>
                                                                    </i>
                                                                </div>
                                                                <div class="flex-grow-1">
                                                                    <div class="text-muted fw-semibold">Tarjeta</div>
                                                                    <div class="fw-bold">{{ $expense->card->number }} - {{ $expense->card->bank->name }}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="d-flex align-items-start">
                                                                <div class="me-3">
                                                                    <i class="ki-duotone ki-user fs-2x text-success">
                                                                        <span class="path1"></span>
                                                                        <span class="path2"></span>
                                                                        <span class="path3"></span>
                                                                        <span class="path4"></span>
                                                                        <span class="path5"></span>
                                                                        <span class="path6"></span>
                                                                    </i>
                                                                </div>
                                                                <div class="flex-grow-1">
                                                                    <div class="text-muted fw-semibold">Usuario</div>
                                                                    <div class="fw-bold">{{ $expense->user->name }}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row g-3">
                                                <div class="col-md-12">
                                                    <label for="supplier_id_{{ $expense->id }}" class="form-label">Proveedor</label>
                                                    {{ html()->select('supplier_id', $suppliers, old('supplier_id', $expense->supplier_id))
                                                        ->class(['form-select', 'form-select-sm', $errors->has('supplier_id') ? 'is-invalid' : ''])
                                                        ->id('supplier_id_' . $expense->id)
                                                        ->attribute('data-control', 'select2')
                                                        ->attribute('data-placeholder', 'Seleccione un proveedor')
                                                        ->placeholder('Seleccione un proveedor')
                                                    }}
                                                </div>
                                                <div class="col-md-12">
                                                    <label for="expense_concept_id_{{ $expense->id }}" class="form-label">Concepto de Movimiento</label>
                                                    {{ html()->select('expense_concept_id', $expenseConcepts, old('expense_concept_id', $expense->expense_concept_id))
                                                        ->class(['form-select', 'form-select-sm', $errors->has('expense_concept_id') ? 'is-invalid' : ''])
                                                        ->id('expense_concept_id_' . $expense->id)
                                                        ->attribute('data-control', 'select2')
                                                        ->attribute('data-placeholder', 'Seleccione un concepto')
                                                        ->placeholder('Seleccione un concepto')
                                                    }}
                                                </div>
                                                <div class="col-md-12">
                                                    <label for="expedient_{{ $expense->id }}" class="form-label">Expediente</label>
                                                    <input type="text" class="form-control form-control-sm" id="expedient_{{ $expense->id }}" name="expedient" value="{{ old('expedient', $expense->expedient) }}">
                                                </div>
                                                <div class="col-md-12">
                                                    <label for="observation_agreed_{{ $expense->id }}" class="form-label">Observación (Conciliación)</label>
                                                    <textarea class="form-control form-control-sm" id="observation_agreed_{{ $expense->id }}" name="observation_agreed" rows="3">
                                                        {{ old('observation_agreed', $expense->observation_agreed ?? '') }}
                                                    </textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                <i class="ki-duotone ki-cross fs-2 me-1">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                                Cancelar
                                            </button>
                                            <button type="submit" class="btn btn-success">
                                                <i class="ki-duotone ki-check-circle fs-2 me-1">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                                Conciliar
                                            </button>
                                        </div>
                                    </form>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
@push('scripts')
<script>
    (function () {
        const fromInput = document.getElementById('deleted_date_from');
        const toInput   = document.getElementById('deleted_date_to');
        const btnExcel  = document.getElementById('btn-deleted-excel');
        const btnPdf    = document.getElementById('btn-deleted-pdf');

        if (!fromInput) return;

        function updateButtons() {
            const from = fromInput.value;
            const to   = toInput.value;

            if (from && to && from <= to) {
                const params = '?date_from=' + from + '&date_to=' + to;
                btnExcel.href = btnExcel.dataset.baseUrl + params;
                btnPdf.href   = btnPdf.dataset.baseUrl   + params;
                btnExcel.classList.remove('disabled');
                btnPdf.classList.remove('disabled');
            } else {
                btnExcel.href = '#';
                btnPdf.href   = '#';
                btnExcel.classList.add('disabled');
                btnPdf.classList.add('disabled');
            }
        }

        fromInput.addEventListener('change', updateButtons);
        toInput.addEventListener('change', updateButtons);
    })();
</script>
@endpush

@endsection