@extends('voyager::master')

@section('page_title', 'Movimientos cta cte')

@section('head')
    <style>
        .table p {
            font-size: 0.9rem;
        }

        .search-container {
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            margin-bottom: 20px;
        }

        .search-label {
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
        }

        .search-fields {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .search-fields label {
            font-size: 14px;
            margin-right: 5px;
            white-space: nowrap;
        }

        .search-input {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 300px;
            flex: 1;
        }

        .search-select {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            min-width: 150px;
        }

        .advanced-search-link {
            margin-left: auto;
            color: #007bff;
            text-decoration: none;
            font-size: 14px;
        }

        .advanced-search-link:hover {
            text-decoration: underline;
        }
    </style>
@endsection

@section('page_header')
    <div class="d-flex justify-between items-center">
        <div class="d-flex header-title">
            <h1 class="page-title">
                <img src="{{ voyager_asset('images/iconos/mov_cta.webp') }}" alt="">
                Movimientos de cuenta corriente
            </h1>
        </div>
        <div class="btn-group"
            style="display: flex; justify-content: center; gap: 5px; align-items: center; margin-right: 30px;">
            <a href="/admin/cliente/{{ $cliente->id }}/show" class="btn btn-warning btn-add-new">
                <i class="voyager-double-left"></i>
                <span>Volver atras</span>
            </a>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <!-- Filtro de fechas -->
                        <form action="/admin/cliente/{{$cliente->id}}/movimientos" method="GET">
                            <div class="d-flex" style="gap: 10px;">
                                <div class="form-group">
                                    <label for="fecha_inicio">Desde:</label>
                                    <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control"
                                        value="{{ request('fecha_inicio') }}">
                                </div>
                                <div class="form-group">
                                    <label for="fecha_fin">Hasta:</label>
                                    <input type="date" name="fecha_fin" id="fecha_fin" class="form-control"
                                        value="{{ request('fecha_fin') }}">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Buscar</button>
                        </form>

                        <!-- Tabla de resultados -->
                        <table class="table table-bordered" style="margin-top: 20px;">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Operación</th>
                                    <th>Comprobante</th>
                                    <th>Facturado</th>
                                    <th>Pendiente de cobro</th>
                                    <th>Saldo</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($movimientos as $movimiento)
                                    <tr
                                        @if ($movimiento->tipo_movimiento == 1) style="background-color: #ff000014 !important;" @else style="background-color: #00800014 !important;" @endif>
                                        <td>{{ $movimiento->created_at }}</td>
                                        <td>
                                            @if ($movimiento->tipo_movimiento == 1)
                                                Facturación
                                            @else
                                                Cobranza
                                            @endif
                                        </td>
                                        <td></td>
                                        <td>
                                            <p
                                                @if ($movimiento->tipo_movimiento == 1) style="color: red !important;" @else style="color: green !important;" @endif>
                                                $ {{ number_format($movimiento->monto, 2, ',', '.') }}</p>
                                        </td>
                                        <td></td>
                                        <td>
                                            <p>$ {{ number_format($movimiento->saldo, 2, ',', '.') }}</p>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop


@section('javascript')
    <script>
        $(document).ready(function() {
            // Manejar cualquier script adicional necesario
        });
    </script>
@stop