<div>
    <x-layouts.app title="{{ __('Locations') }}">
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Warehouse Locations') }}</h1>
                <p class="text-muted mb-0">{{ __('Manage storage locations within branches') }}</p>
            </div>
            <button class="btn btn-primary" wire:click="openModal">
                <i class="fas fa-plus me-2"></i>{{ __('Add Location') }}
            </button>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">{{ 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">{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
        @endif

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Search') }}</label>
                        <input type="text" class="form-control" wire:model.live.debounce.300ms="search"
                               placeholder="{{ __('Search by name or code...') }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('Branch') }}</label>
                        <select class="form-select" wire:model.live="filterBranchId">
                            <option value="">{{ __('All Branches') }}</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>{{ __('Code') }}</th>
                            <th>{{ __('Name') }}</th>
                            <th>{{ __('Branch') }}</th>
                            <th>{{ __('Default') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th class="text-end">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($locations as $location)
                            <tr wire:key="loc-{{ $location->id }}">
                                <td><code>{{ $location->code }}</code></td>
                                <td>
                                    <strong>{{ $location->name }}</strong>
                                    @if($location->name_ar)
                                        <br><small class="text-muted" dir="rtl">{{ $location->name_ar }}</small>
                                    @endif
                                </td>
                                <td>{{ $location->branch->name }}</td>
                                <td>
                                    @if($location->is_default)
                                        <span class="badge bg-primary"><i class="fas fa-star"></i> {{ __('Default') }}</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $location->is_active ? 'bg-success' : 'bg-secondary' }}">
                                        {{ $location->is_active ? __('Active') : __('Inactive') }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-outline-primary" wire:click="openModal({{ $location->id }})">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm {{ $location->is_active ? 'btn-warning' : 'btn-success' }}"
                                            wire:click="toggleActive({{ $location->id }})">
                                        <i class="fas {{ $location->is_active ? 'fa-ban' : 'fa-check' }}"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger"
                                            wire:click="delete({{ $location->id }})"
                                            wire:confirm="{{ __('Delete this location?') }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">{{ __('No locations found.') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($locations->hasPages())
                <div class="card-footer">{{ $locations->links() }}</div>
            @endif
        </div>

        <!-- Modal -->
        @if($showModal)
            <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ $editingId ? __('Edit Location') : __('Add Location') }}</h5>
                            <button type="button" class="btn-close" wire:click="$set('showModal', false)"></button>
                        </div>
                        <form wire:submit="save">
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label class="form-label">{{ __('Branch') }} <span class="text-danger">*</span></label>
                                    <select class="form-select @error('branchId') is-invalid @enderror" wire:model.live="branchId">
                                        <option value="">{{ __('Select Branch') }}</option>
                                        @foreach($branches as $branch)
                                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('branchId') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-8">
                                        <label class="form-label">{{ __('Name') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror" wire:model="name"
                                               placeholder="{{ __('e.g., Main Warehouse') }}">
                                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">{{ __('Code') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('code') is-invalid @enderror" wire:model="code">
                                        @error('code') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('Name (Arabic)') }}</label>
                                    <input type="text" class="form-control" wire:model="nameAr" dir="rtl">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('Address') }}</label>
                                    <textarea class="form-control" rows="2" wire:model="address"></textarea>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" wire:model="isDefault" id="locDefault">
                                            <label class="form-check-label" for="locDefault">{{ __('Default Location') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" wire:model="isActive" id="locActive">
                                            <label class="form-check-label" for="locActive">{{ __('Active') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" wire:click="$set('showModal', false)">{{ __('Cancel') }}</button>
                                <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </x-layouts.app>
</div>
