@extends('layouts.app')
@section('title', 'Gestión de Reembolsos')
@push('styles')
    <link href="{{ asset('css/refund.css') }}" rel="stylesheet">
@endpush
@section('content')
<div id="layout-wrapper">
    @include('layouts.partials.header')
    @include('layouts.partials.sidebar')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <!-- Page Title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">
                                Refunds
                            </h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Panel</a></li>
                                    <li class="breadcrumb-item active">Refunds</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Main Card -->
                <form id="refund-search-form" method="POST" action="{{ route('refund.search') }}">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title mb-0">
                                    Búsqueda Multi-País
                                </h4>
                            </div>
                            <div class="card-body">
                                <!-- Formulario de Búsqueda -->

                                    @csrf
                                    <div class="row mb-4">
                                        <div class="col-md-12">
                                            <label for="email" class="form-label">
                                                Email del Cliente
                                            </label>
                                            <input type="email"
                                                   class="form-control @error('email') is-invalid @enderror"
                                                   id="email"
                                                   name="email"
                                                   value="{{ old('email') }}"
                                                   placeholder="cliente@ejemplo.com"
                                                   required>
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 d-flex gap-2 flex-wrap">
                                            <button type="submit" class="btn btn-primary waves-effect btn-label waves-light">
                                                <i class="bx bx-search label-icon"></i> Buscar Documentos
                                            </button>
                                            <button type="button" class="btn btn-secondary waves-effect btn-label waves-light" onclick="resetForm()">
                                                <i class="bx bx-redo label-icon"></i> Limpiar
                                            </button>
                                        </div>
                                    </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="form-label">
                                    Países a Buscar
                                </h5>
                                <div class="country-list">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="select-all-countries">
                                        <label class="form-check-label fw-bold" for="select-all-countries">
                                            Seleccionar Todos
                                        </label>
                                    </div>
                                    <hr class="my-2">
                                    <div class="table-responsive">
                                        <table class="table table-nowrap align-middle mb-0">
                                            <tbody>
                                                @foreach($countries as $code => $country)
                                                <tr>
                                                    <td style="width: 40px;">
                                                        <div class="form-check font-size-16">
                                                            <input class="form-check-input country-checkbox"
                                                                type="checkbox"
                                                                name="countries[]"
                                                                value="{{ $code }}"
                                                                id="country-{{ $code }}"
                                                                {{ in_array($code, old('countries', [])) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="country-{{ $code }}"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <h5 class="text-truncate font-size-14 m-0">
                                                            <a href="javascript: void(0);" class="text-dark">
                                                                {{ $country['name'] }}
                                                                <small class="text-muted">({{ $code }})</small>
                                                            </a>
                                                        </h5>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                @error('countries')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <h6><i class="bx bx-info-circle me-2"></i>Instrucciones:</h6>
                            <ul class="mb-0">
                                <li>Ingresa el email del cliente para buscar sus documentos</li>
                                <li>Selecciona uno o más países donde buscar</li>
                                <li>El sistema buscará solo documentos con estado "paid"</li>
                                <li>Podrás procesar reembolsos individuales o múltiples desde los resultados</li>
                            </ul>
                        </div>
                    </div>
                </div>
                </form>
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bx bx-check-circle me-2"></i>
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bx bx-x-circle me-2"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Manejar "Seleccionar Todos"
    const selectAllCheckbox = document.getElementById('select-all-countries');
    const countryCheckboxes = document.querySelectorAll('.country-checkbox');
    selectAllCheckbox.addEventListener('change', function() {
        countryCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
    // Actualizar "Seleccionar Todos" cuando se cambian checkboxes individuales
    countryCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const checkedCount = document.querySelectorAll('.country-checkbox:checked').length;
            selectAllCheckbox.checked = checkedCount === countryCheckboxes.length;
            selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < countryCheckboxes.length;
        });
    });
    // Inicializar estado del "Seleccionar Todos"
    const initialCheckedCount = document.querySelectorAll('.country-checkbox:checked').length;
    selectAllCheckbox.checked = initialCheckedCount === countryCheckboxes.length;
    selectAllCheckbox.indeterminate = initialCheckedCount > 0 && initialCheckedCount < countryCheckboxes.length;
});
function resetForm() {
    document.getElementById('refund-search-form').reset();
    document.getElementById('select-all-countries').checked = false;
    document.getElementById('select-all-countries').indeterminate = false;
}
</script>
@endsection