@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">{{ $stats['total'] }}</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">{{ $stats['reservation'] }}</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">{{ $stats['seating'] }}</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">{{ $stats['regions'] }}</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">Users</th>
                        <th class="text-center">Created Date</th>
                        <th class="text-center" width="180">Actions</th>
                    </tr>
                </thead>
            </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 with server-side processing
            var table = $('#branchTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('branch.index') }}",
                    type: 'GET',
                    error: function(xhr, error, code) {
                        console.log('AJAX Error:', xhr.responseText);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: 'Failed to load data. Please refresh the page.',
                            timer: 3000
                        });
                    }
                },
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        render: function(data) {
                            return '<span class="badge bg-light text-dark">' + data + '</span>';
                        }
                    },
                    {
                        data: 'branch_info',
                        name: 'branch_name',
                        render: function(data) {
                            return '<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">' + data.initials + '</span>' +
                                   '</div>' +
                                   '<div>' +
                                   '<h6 class="mb-0">' + data.name + '</h6>' +
                                   '<small class="text-muted">' + data.address + '</small>' +
                                   '</div></div>';
                        }
                    },
                    {
                        data: 'contact_info',
                        name: 'branch_contact_name',
                        render: function(data) {
                            return '<div>' +
                                   '<h6 class="mb-0">' + data.name + '</h6>' +
                                   '<div class="location-info">' +
                                   '<i class="fas fa-envelope me-1 text-muted"></i>' +
                                   '<small>' + data.email + '</small>' +
                                   '</div>' +
                                   '<div class="location-info">' +
                                   '<i class="fas fa-phone me-1 text-muted"></i>' +
                                   '<small>' + data.phone + '</small>' +
                                   '</div></div>';
                        }
                    },
                    {
                        data: 'location_info',
                        name: 'location_info',
                        render: function(data) {
                            var html = '<div class="location-info">' +
                                      '<div class="mb-1">' +
                                      '<i class="fas fa-map-marker-alt me-1 text-danger"></i>' +
                                      '<strong>' + data.city + ', ' + data.state + '</strong>' +
                                      '</div>';
                            
                            if (data.location) {
                                html += '<div class="mb-1">' +
                                       '<i class="fas fa-location-arrow me-1 text-muted"></i>' +
                                       '<small>' + data.location + '</small>' +
                                       '</div>';
                            }
                            
                            if (data.country) {
                                html += '<div>' +
                                       '<i class="fas fa-globe me-1 text-muted"></i>' +
                                       '<small>' + data.country + '</small>' +
                                       '</div>';
                            }
                            
                            html += '</div>';
                            return html;
                        }
                    },
                    {
                        data: 'features',
                        name: 'features',
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        render: function(data) {
                            var html = '<div class="branch-features">';
                            
                            if (data.reservation) {
                                html += '<span class="badge bg-info feature-badge">' +
                                       '<i class="fas fa-calendar-check me-1"></i>Reservation' +
                                       '</span>';
                            }
                            
                            if (data.seating) {
                                html += '<span class="badge bg-purple feature-badge">' +
                                       '<i class="fas fa-chair me-1"></i>Advanced' +
                                       '</span>';
                            }
                            
                            if (!data.reservation && !data.seating) {
                                html += '<span class="badge bg-light text-muted feature-badge">Basic</span>';
                            }
                            
                            html += '</div>';
                            return html;
                        }
                    },
                    {
                        data: 'users_count',
                        name: 'users_count',
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        render: function(data, type, row) {
                            return '<div class="d-flex justify-content-center align-items-center gap-1">' +
                                   '<a href="' + row.view_url + '" target="_blank" class="btn btn-outline-primary btn-sm" title="View Users">' +
                                   '<i class="fas fa-user-plus"></i>' +
                                   '</a>' +
                                   '<span class="badge bg-primary">' + data + '</span>' +
                                   '</div>';
                        }
                    },
                    {
                        data: 'created_date',
                        name: 'created_at',
                        className: 'text-center',
                        render: function(data) {
                            return '<div>' +
                                   '<strong>' + data.date + '</strong>' +
                                   '</div>' +
                                   '<small class="text-muted">' + data.time + '</small>';
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                        render: function(data, type, row) {
                            return '<div class="action-buttons">' +
                                   '<a href="' + row.users_url + '" target="_blank" class="btn btn-sm btn-outline-info" ' +
                                   'data-bs-toggle="tooltip" title="View Users">' +
                                   '<i class="fas fa-users"></i>' +
                                   '</a>' +
                                   '<a href="' + row.edit_url + '" target="_blank" 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="' + row.id + '" data-name="' + row.branch_info.name + '" ' +
                                   'data-bs-toggle="tooltip" title="Delete Branch">' +
                                   '<i class="fas fa-trash"></i>' +
                                   '</button>' +
                                   '<form id="delete-form-' + row.id + '" action="' + row.delete_url + '" ' +
                                   'method="POST" style="display: none;">' +
                                   '<input type="hidden" name="_token" value="{{ csrf_token() }}">' +
                                   '<input type="hidden" name="_method" value="DELETE">' +
                                   '</form>' +
                                   '</div>';
                        }
                    }
                ],
                responsive: true,
                pageLength: 10,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
                     '<"row"<"col-sm-12"tr>>' +
                     '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
                order: [[6, 'desc']], // Order by created date
                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",
                    processing: '<div class="spinner-border text-success" role="status">' +
                               '<span class="visually-hidden">Loading...</span></div>'
                },
                drawCallback: function(settings) {
                    // Re-initialize tooltips after table redraw
                    $('[data-bs-toggle="tooltip"]').tooltip();
                }
            });

            // Delete confirmation
            $('#branchTable').on('click', '.delete-branch', function(e) {
                e.preventDefault();
                var branchId = $(this).data('id');
                var 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) {
                        Swal.fire({
                            title: 'Deleting...',
                            text: 'Please wait while we delete the branch.',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                        
                        $('#delete-form-' + branchId).submit();
                    }
                });
            });

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

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

                table.ajax.reload(function() {
                    icon.removeClass('fa-spin');
                    button.prop('disabled', false);
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'Refreshed!',
                        text: 'Table data has been refreshed.',
                        timer: 1500,
                        showConfirmButton: false
                    });
                }, false);
            });

            // Initialize tooltips on page load
            $('[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