<div>
    <x-layouts.app title="{{ __('Branches') }}">
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Branches') }}</h1>
                <p class="text-muted mb-0">{{ __('Manage store locations') }}</p>
            </div>
            <button class="btn btn-primary" wire:click="openModal">
                <i class="fas fa-plus me-2"></i>{{ __('Add Branch') }}
            </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

        <div class="row g-4">
            @forelse($branches as $branch)
                <div class="col-md-6 col-lg-4" wire:key="branch-{{ $branch->id }}">
                    <div class="card h-100 {{ $branch->is_main ? 'border-primary border-2' : '' }}">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                {{ $branch->name }}
                                @if($branch->is_main)
                                    <span class="badge bg-primary ms-2">{{ __('Main') }}</span>
                                @endif
                            </h5>
                            <span class="badge {{ $branch->is_active ? 'bg-success' : 'bg-secondary' }}">
                                {{ $branch->is_active ? __('Active') : __('Inactive') }}
                            </span>
                        </div>
                        <div class="card-body">
                            @if($branch->name_ar)
                                <p class="mb-2" dir="rtl"><strong>{{ $branch->name_ar }}</strong></p>
                            @endif
                            @if($branch->address)
                                <p class="text-muted mb-2"><i class="fas fa-map-marker-alt me-2"></i>{{ $branch->address }}</p>
                            @endif
                            @if($branch->phone)
                                <p class="mb-1"><i class="fas fa-phone me-2"></i>{{ $branch->phone }}</p>
                            @endif
                            @if($branch->email)
                                <p class="mb-0"><i class="fas fa-envelope me-2"></i>{{ $branch->email }}</p>
                            @endif
                        </div>
                        <div class="card-footer d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary flex-grow-1" wire:click="edit({{ $branch->id }})">
                                <i class="fas fa-edit me-1"></i>{{ __('Edit') }}
                            </button>
                            <button class="btn btn-sm {{ $branch->is_active ? 'btn-warning' : 'btn-success' }}"
                                    wire:click="toggleActive({{ $branch->id }})">
                                {{ $branch->is_active ? __('Deactivate') : __('Activate') }}
                            </button>
                            @if(!$branch->is_main)
                                <button class="btn btn-sm btn-outline-danger"
                                        wire:click="delete({{ $branch->id }})"
                                        wire:confirm="{{ __('Delete this branch?') }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="card">
                        <div class="card-body text-center py-5 text-muted">
                            {{ __('No branches configured.') }}
                        </div>
                    </div>
                </div>
            @endforelse
        </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">{{ $isEditing ? __('Edit Branch') : __('Add Branch') }}</h5>
                            <button type="button" class="btn-close" wire:click="$set('showModal', false)"></button>
                        </div>
                        <form wire:submit="save">
                            <div class="modal-body">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <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">
                                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Name (Arabic)') }}</label>
                                        <input type="text" class="form-control" wire:model="name_ar" dir="rtl">
                                    </div>
                                </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 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Phone') }}</label>
                                        <input type="text" class="form-control" wire:model="phone">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Email') }}</label>
                                        <input type="email" class="form-control" wire:model="email">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" wire:model="is_active" id="branchActive">
                                            <label class="form-check-label" for="branchActive">{{ __('Active') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" wire:model="is_main" id="branchMain">
                                            <label class="form-check-label" for="branchMain">{{ __('Main Branch') }}</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>
