@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row mb-4">
        <div class="col-md-6">
            <h2>Branch Management</h2>
        </div>
        <div class="col-md-6 text-end">
            <a href="{{ route('branches.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Add New Branch
            </a>
            <a href="{{ route('branches.export') }}" class="btn btn-success">
                <i class="fas fa-download"></i> Export
            </a>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('branches.index') }}" class="row g-3">
                <div class="col-md-4">
                    <input type="text" name="search" class="form-control" 
                           placeholder="Search branches..." value="{{ request('search') }}">
                </div>
                <div class="col-md-3">
                    <select name="company_id" class="form-control">
                        <option value="">All Companies</option>
                        @foreach($companies as $company)
                            <option value="{{ $company->companies_id }}" 
                                {{ request('company_id') == $company->companies_id ? 'selected' : '' }}>
                                {{ $company->company_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-control">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>Suspended</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{{ route('branches.index') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Branches Table -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="select-all">
                            </th>
                            <th>#</th>
                            <th>Branch Name</th>
                            <th>Branch Code</th>
                            <th>Company</th>
                            <th>Phone</th>
                            <th>Status</th>
                            <th>Created By</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($branches as $branch)
                            <tr>
                                <td>
                                    <input type="checkbox" class="branch-checkbox" value="{{ $branch->branches_id }}">
                                </td>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $branch->branch_name }}</td>
                                <td>{{ $branch->branch_code }}</td>
                                <td>{{ $branch->company->company_name ?? 'N/A' }}</td>
                                <td>{{ $branch->phone }}</td>
                                <td>{!! $branch->status_badge !!}</td>
                                <td>{{ $branch->creator->name ?? 'N/A' }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ route('branches.show', $branch) }}" 
                                           class="btn btn-info" title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('branches.edit', $branch) }}" 
                                           class="btn btn-warning" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" 
                                                class="btn btn-danger delete-btn" 
                                                data-id="{{ $branch->branches_id }}"
                                                data-name="{{ $branch->branch_name }}"
                                                title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center">No branches found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <button id="bulk-delete" class="btn btn-danger btn-sm">
                        <i class="fas fa-trash"></i> Delete Selected
                    </button>
                </div>
                <div class="col-md-6">
                    {{ $branches->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Select all functionality
    $('#select-all').change(function() {
        $('.branch-checkbox').prop('checked', $(this).prop('checked'));
    });

    // Bulk delete
    $('#bulk-delete').click(function() {
        let ids = [];
        $('.branch-checkbox:checked').each(function() {
            ids.push($(this).val());
        });

        if (ids.length === 0) {
            alert('Please select at least one branch.');
            return;
        }

        if (confirm('Are you sure you want to delete selected branches?')) {
            $.ajax({
                url: '{{ route("branches.bulk-delete") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    ids: ids
                },
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        location.reload();
                    }
                },
                error: function(xhr) {
                    alert('Error: ' + xhr.responseJSON.message);
                }
            });
        }
    });

    // Single delete
    $('.delete-btn').click(function() {
        let id = $(this).data('id');
        let name = $(this).data('name');

        if (confirm('Are you sure you want to delete branch: "' + name + '"?')) {
            $.ajax({
                url: '/branches/' + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        location.reload();
                    }
                },
                error: function(xhr) {
                    alert('Error: ' + xhr.responseJSON.message);
                }
            });
        }
    });
});
</script>
@endpush
@endsection