@extends('admin.layouts.app')

@section('content')
<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">Sucursales</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.branches.create') }}" class="btn btn-primary">
                <i class="ri-add-line"></i> Nueva Sucursal
                </a>
            </div>
        </div>
    </div>
</div>
        @include('admin.message')
        
        <!-- Filtros -->
        <div class="card mb-3">
            <div class="card-body">
                <form method="GET" action="{{ route('admin.branches.index') }}">
                    <div class="row">
                        <div class="col-md-3">
                            <input type="text" name="search" class="form-control" 
                                   placeholder="Buscar por nombre, ciudad, dirección..." 
                                   value="{{ request('search') }}">
                        </div>
                        <div class="col-md-2">
                            <select name="type" class="form-select">
                                <option value="">-- Todos los tipos --</option>
                                <option value="store" {{ request('type') == 'store' ? 'selected' : '' }}>Tienda</option>
                                <option value="warehouse" {{ request('type') == 'warehouse' ? 'selected' : '' }}>Depósito</option>
                                <option value="office" {{ request('type') == 'office' ? 'selected' : '' }}>Oficina</option>
                                <option value="pickup_point" {{ request('type') == 'pickup_point' ? 'selected' : '' }}>Punto de Retiro</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="is_active" class="form-select">
                                <option value="">-- Estado --</option>
                                <option value="1" {{ request('is_active') == '1' ? 'selected' : '' }}>Activas</option>
                                <option value="0" {{ request('is_active') == '0' ? 'selected' : '' }}>Inactivas</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="per_page" class="form-select">
                                <option value="10" {{ request('per_page') == '10' ? 'selected' : '' }}>Mostrar 10</option>
                                <option value="25" {{ request('per_page') == '25' ? 'selected' : '' }}>Mostrar 25</option>
                                <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>Mostrar 50</option>
                                <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>Mostrar 100</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-search-line"></i> Buscar
                            </button>
                            <a href="{{ route('admin.branches.index') }}" class="btn btn-secondary">
                                <i class="ri-refresh-line"></i> Limpiar
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Tabla de sucursales -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th width="60">ID</th>
                                <th>Sucursal</th>
                                <th>Tipo</th>
                                <th>Ciudad</th>
                                <th>Teléfono</th>
                                <th>WhatsApp</th>
                                <th width="100">Horario</th>
                                <th width="100">Principal</th>
                                <th width="100">Estado</th>
                                <th width="150">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($branches->isNotEmpty())
                                @foreach($branches as $branch)
                                <tr>
                                    <td>{{ $branch->id }}</td>
                                    <td>
                                        <div>
                                            <strong>{{ $branch->name }}</strong>
                                            @if($branch->code)
                                                <span class="badge bg-secondary">{{ $branch->code }}</span>
                                            @endif
                                            <br>
                                            <small class="text-muted">{{ $branch->address }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        @php
                                            $typeLabels = [
                                                'store' => ['Tienda', 'primary'],
                                                'warehouse' => ['Depósito', 'warning'],
                                                'office' => ['Oficina', 'info'],
                                                'pickup_point' => ['Punto Retiro', 'success']
                                            ];
                                            $type = $typeLabels[$branch->type] ?? ['Otro', 'secondary'];
                                        @endphp
                                        <span class="badge badge-{{ $type[1] }}">{{ $type[0] }}</span>
                                    </td>
                                    <td>
                                        {{ $branch->city }}
                                        @if($branch->state)
                                            <br><small>{{ $branch->state }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($branch->phone)
                                            <a href="tel:{{ $branch->phone }}">
                                                <i class="ri-phone-line"></i> {{ $branch->phone }}
                                            </a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($branch->whatsapp)
                                            <a href="{{ $branch->whatsapp_link }}" target="_blank" class="btn btn-sm btn-success">
                                                <i class="ri-whatsapp-fill"></i>
                                            </a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($branch->isOpenNow())
                                            <span class="badge bg-success">
                                                <i class="ri-time-line"></i> Abierto
                                            </span>
                                        @else
                                            <span class="badge bg-danger">
                                                <i class="ri-time-line"></i> Cerrado
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($branch->is_main)
                                            <span class="badge bg-warning">
                                                <i class="ri-star-line"></i> Principal
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input status-toggle" 
                                                   id="status_{{ $branch->id }}" 
                                                   data-id="{{ $branch->id }}"
                                                   data-name="{{ $branch->name }}"
                                                   {{ $branch->is_active ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="status_{{ $branch->id }}">
                                                <span class="badge badge-{{ $branch->is_active ? 'success' : 'danger' }}">
                                                    {{ $branch->is_active ? 'Activa' : 'Inactiva' }}
                                                </span>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <a href="{{ $branch->maps_link }}" target="_blank"
                                               class="btn btn-sm btn-info" title="Ver en mapa">
                                                <i class="ri-map-line"></i>
                                            </a>
                                            <a href="{{ route('admin.branches.seo', $branch->id) }}"
                                               class="btn btn-sm btn-success" title="SEO">
                                                <i class="ri-global-line"></i>
                                            </a>
                                            <a href="{{ route('admin.branches.edit', $branch->id) }}"
                                               class="btn btn-sm btn-warning">
                                                <i class="ri-pencil-line"></i>
                                            </a>
                                            <button type="button" class="btn btn-sm btn-danger delete-btn"
                                                    data-id="{{ $branch->id }}" data-name="{{ $branch->name }}">
                                                <i class="ri-delete-bin-line"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="10" class="text-center">
                                        <div class="py-5">
                                            <i class="ri-map-pin-line ri-3x text-muted mb-3"></i>
                                            <p class="text-muted">No se encontraron sucursales</p>
                                            <a href="{{ route('admin.branches.create') }}" class="btn btn-primary">
                                                <i class="ri-add-line"></i> Crear Primera Sucursal
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                
                @if($branches->hasPages())
                    <div class="mt-3">
                        {{ $branches->withQueryString()->links() }}
                    </div>
                @endif
            </div>
        </div>

@endsection

@section('customJs')
<script>
// Toggle status
$('.status-toggle').change(function() {
    var branchId = $(this).data('id');
    var branchName = $(this).data('name');
    var checkbox = $(this);
    var label = checkbox.next('label');
    var badge = label.find('.badge');
    var isChecked = checkbox.is(':checked');
    
    $.ajax({
        url: "{{ url('admin/branches') }}/" + branchId + "/toggle-status",
        type: 'POST',
        data: {
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            if (response.success) {
                // Actualizar el badge visual
                if (response.is_active) {
                    badge.removeClass('bg-danger').addClass('bg-success').text('Activa');
                } else {
                    badge.removeClass('bg-success').addClass('bg-danger').text('Inactiva');
                }
                
                // Mostrar notificación más descriptiva
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: `Sucursal "${branchName}" ${response.is_active ? 'activada' : 'desactivada'}`,
                    showConfirmButton: false,
                    timer: 2500
                });
            }
        },
        error: function() {
            // Revertir el checkbox si hay error
            checkbox.prop('checked', !isChecked);
            
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'No se pudo actualizar el estado de la sucursal',
                confirmButtonText: 'OK'
            });
        }
    });
});

// Delete branch
$('.delete-btn').click(function() {
    var branchId = $(this).data('id');
    var branchName = $(this).data('name');
    
    Swal.fire({
        title: '¿Eliminar sucursal?',
        text: 'Se eliminará la sucursal: ' + branchName,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            var form = $('<form>', {
                method: 'POST',
                action: "{{ url('admin/branches') }}/" + branchId
            });
            
            form.append($('<input>', {
                type: 'hidden',
                name: '_token',
                value: "{{ csrf_token() }}"
            }));
            
            form.append($('<input>', {
                type: 'hidden',
                name: '_method',
                value: 'DELETE'
            }));
            
            $('body').append(form);
            form.submit();
        }
    });
});
</script>
@endsection