@extends('layouts.master')

@section('title')
    @lang('translation.branch')
@endsection

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('build/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        .region-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            white-space: nowrap;
        }

        .action-buttons .btn {
            padding: 0.25rem 0.5rem;
            margin-right: 0.25rem;
            font-size: 0.875rem;
        }

        .table-container {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .page-header {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .stats-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            border-left: 4px solid #28a745;
        }

        .location-info {
            font-size: 0.875rem;
        }

        .branch-features {
            display: flex;
            gap: 5px;
            justify-content: center;
        }

        .feature-badge {
            font-size: 0.65rem;
            padding: 2px 6px;
        }

        .text-purple {
            color: #6f42c1 !important;
        }

        .bg-purple {
            background-color: #6f42c1 !important;
        }

        .avatar-sm {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
@endsection

@section('content')
    {{-- Page Header --}}
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h3 class="mb-1">@lang('translation.Branch List')</h3>
                <p class="mb-0 opacity-75">Manage and monitor all branch locations</p>
            </div>
        </div>
    </div>

    {{-- Stats Cards --}}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <h4 class="text-success mb-1" id="totalBranches">{{ $branches->count() }}</h4>
                <p class="mb-0 text-muted">Total Branches</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #007bff;">
                <h4 class="text-primary mb-1" id="withReservation">{{ $branches->where('reservation_enabled', true)->count() }}</h4>
                <p class="mb-0 text-muted">With Reservation</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #6f42c1;">
                <h4 class="text-purple mb-1" id="advancedSeating">{{ $branches->where('advanced_seating_enabled', true)->count() }}</h4>
                <p class="mb-0 text-muted">Advanced Seating</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #fd7e14;">
                <h4 class="text-warning mb-1" id="totalRegions">{{ $branches->groupBy('region')->count() }}</h4>
                <p class="mb-0 text-muted">Regions</p>
            </div>
        </div>
    </div>

    {{-- Main Table Container --}}
    <div class="table-container">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">
                <i class="fas fa-code-branch me-2 text-success"></i>Branch Directory
            </h5>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary btn-sm" id="refreshBtn">
                    <i class="fas fa-sync-alt me-1"></i>Refresh
                </button>
            </div>
        </div>

        <div class="table-responsive">
            <table id="branchTable" class="table table-bordered dt-responsive nowrap w-100">
                <thead class="table-light">
                    <tr>
                        <th class="text-center" width="60">Sr.</th>
                        <th>Branch Information</th>
                        <th>Contact Person</th>
                        <th>Location Details</th>
                        <th class="text-center">Features</th>
                        <th class="text-center">User</th>
                        <th class="text-center">Created Date</th>
                        <th class="text-center" width="180">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($branches as $key => $branch)
                        <tr>
                            <td class="text-center">
                                <span class="badge bg-light text-dark">{{ $key + 1 }}</span>
                            </td>

                            {{-- Branch Information --}}
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-success rounded-circle d-flex align-items-center justify-content-center me-2">
                                        <span class="text-white fw-bold">{{ substr($branch->branch_name, 0, 2) }}</span>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ $branch->branch_name }}</h6>
                                        <small class="text-muted">{{ $branch->branch_address }}</small>
                                    </div>
                                </div>
                            </td>

                            {{-- Contact Person --}}
                            <td>
                                <div>
                                    <h6 class="mb-0">{{ $branch->branch_contact_name }}</h6>
                                    <div class="location-info">
                                        <i class="fas fa-envelope me-1 text-muted"></i>
                                        <small>{{ $branch->branch_contact_email }}</small>
                                    </div>
                                    <div class="location-info">
                                        <i class="fas fa-phone me-1 text-muted"></i>
                                        <small>{{ $branch->branch_contact_phone }}</small>
                                    </div>
                                </div>
                            </td>

                            {{-- Location Details --}}
                            <td>
                                <div class="location-info">
                                    <div class="mb-1">
                                        <i class="fas fa-map-marker-alt me-1 text-danger"></i>
                                        <strong>{{ $branch->citys->name ?? '' }}, {{ $branch->states->name ?? '' }}</strong>
                                    </div>
                                    @if ($branch->location)
                                        <div class="mb-1">
                                            <i class="fas fa-location-arrow me-1 text-muted"></i>
                                            <small>{{ $branch->location }}</small>
                                        </div>
                                    @endif
                                    @if ($branch->countrys)
                                        <div>
                                            <i class="fas fa-globe me-1 text-muted"></i>
                                            <small>{{ $branch->countrys->name ?? '' }}</small>
                                        </div>
                                    @endif
                                </div>
                            </td>

                            {{-- Features --}}
                            <td class="text-center">
                                <div class="branch-features">
                                    @if ($branch->reservation_enabled)
                                        <span class="badge bg-info feature-badge">
                                            <i class="fas fa-calendar-check me-1"></i>Reservation
                                        </span>
                                    @endif
                                    @if ($branch->advanced_seating_enabled)
                                        <span class="badge bg-purple feature-badge">
                                            <i class="fas fa-chair me-1"></i>Advanced
                                        </span>
                                    @endif
                                    @if (!$branch->reservation_enabled && !$branch->advanced_seating_enabled)
                                        <span class="badge bg-light text-muted feature-badge">Basic</span>
                                    @endif
                                </div>
                            </td>

                            {{-- User Column --}}
                            <td class="text-center">
                                <div class="d-flex justify-content-center align-items-center gap-1">
                                    <a href="{{ route('branch.show', $branch->id) }}" class="btn btn-outline-primary btn-sm" title="View Users">
                                        <i class="fas fa-user-plus"></i>
                                    </a>
                                    <span class="badge bg-primary">{{ count($branch->users) }}</span>
                                </div>
                            </td>

                            {{-- Created Date --}}
                            <td class="text-center">
                                <div>
                                    <strong>{{ $branch->created_at->format('d M Y') }}</strong>
                                </div>
                                <small class="text-muted">{{ $branch->created_at->format('H:i A') }}</small>
                            </td>

                            {{-- Actions --}}
                            <td class="text-center">
                                <div class="action-buttons">
                                    <a href="{{ route('branch.users', $branch->id) }}" class="btn btn-sm btn-outline-info"
                                        data-bs-toggle="tooltip" title="View Users">
                                        <i class="fas fa-users"></i>
                                    </a>
                                    <a href="{{ route('branch.edit', $branch->id) }}"
                                        class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip"
                                        title="Edit Branch">
                                        <i class="far fa-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-branch"
                                        data-id="{{ $branch->id }}" data-name="{{ $branch->branch_name }}"
                                        data-bs-toggle="tooltip" title="Delete Branch">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>

                                {{-- Hidden delete form --}}
                                <form id="delete-form-{{ $branch->id }}"
                                    action="{{ route('branch.destroy', $branch->id) }}" method="POST"
                                    style="display: none;">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('script')
    <!-- Required datatable js -->
    <script src="{{ URL::asset('build/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Buttons examples -->
    <script src="{{ URL::asset('build/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/pdfmake/build/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/pdfmake/build/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-buttons/js/buttons.colVis.min.js') }}"></script>

    <!-- Responsive examples -->
    <script src="{{ URL::asset('build/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>

    <!-- SweetAlert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable following your theme's pattern
            var table = $('#branchTable').DataTable({
                responsive: true,
                order: [[6, 'desc']],
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search branches...",
                    lengthMenu: "_MENU_ entries per page",
                    info: "Showing _START_ to _END_ of _TOTAL_ branches",
                    infoEmpty: "No branches available",
                    infoFiltered: "(filtered from _MAX_ total branches)",
                    emptyTable: "No branch data available",
                    zeroRecords: "No matching branches found"
                },
                columnDefs: [
                    { orderable: false, targets: [0, 7] }, // Sr.No and Actions columns not sortable
                    { searchable: false, targets: [0, 4, 5, 7] }, // These columns not searchable
                    { className: "text-center", targets: [0, 4, 5, 6, 7] } // Center align these columns
                ],
                dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
                drawCallback: function(settings) {
                    // Re-initialize tooltips after table redraw
                    $('[data-bs-toggle="tooltip"]').tooltip();

                    // Update stats based on filtered data
                    updateStats();
                }
            });

            // Update stats based on filtered data
            function updateStats() {
                const filteredData = table.rows({ filter: 'applied' }).data();
                let total = 0, reservation = 0, seating = 0, regions = new Set();

                filteredData.each(function(value, index) {
                    total++;
                    // Extract data from the row
                    const $row = $(this.node());
                    const hasReservation = $row.find('.badge.bg-info').length > 0;
                    const hasSeating = $row.find('.badge.bg-purple').length > 0;

                    if (hasReservation) reservation++;
                    if (hasSeating) seating++;

                    // For regions, you might need to store this data in data attributes
                    const region = $row.data('region');
                    if (region) regions.add(region);
                });

                $('#totalBranches').text(total);
                $('#withReservation').text(reservation);
                $('#advancedSeating').text(seating);
                // Regions count might not be accurate without server-side processing
            }

            // Delete confirmation
            $(document).on('click', '.delete-branch', function(e) {
                e.preventDefault();
                const branchId = $(this).data('id');
                const branchName = $(this).data('name');

                Swal.fire({
                    title: 'Delete Branch?',
                    html: `Are you sure you want to delete <strong>"${branchName}"</strong>?<br><small class="text-muted">This action cannot be undone.</small>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#delete-form-' + branchId).submit();
                    }
                });
            });

            // Refresh button
            $('#refreshBtn').on('click', function() {
                const button = $(this);
                const icon = button.find('i');

                icon.addClass('fa-spin');
                button.prop('disabled', true);

                // Reload the page after a short delay to show the spinning icon
                setTimeout(function() {
                    location.reload();
                }, 500);
            });

            // Initialize tooltips
            $('[data-bs-toggle="tooltip"]').tooltip();
        });

        // Show session messages
        @if (session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false
            });
        @endif

        @if (session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: '{{ session('error') }}',
                timer: 3000,
                showConfirmButton: false
            });
        @endif
    </script>
@endsection