@extends('layouts.master')

@section('title')
    @lang('translation.outlet')
@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;
        }

        .shop-count-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, #ff6b35 0%, #f7931e 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 #ff6b35;
        }

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

        .food-court-info {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

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

        .avatar-sm {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

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

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

        .text-warning {
            color: #ff6b35 !important;
        }
    </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.Outlet List')</h3>
                <p class="mb-0 opacity-75">Manage and monitor all food court outlets</p>
            </div>
            {{-- <a href="{{ route('branch.index') }}?type=outlet" class="btn btn-light btn-lg px-4">
                <i class="fas fa-plus me-2"></i>@lang('translation.Add')
            </a> --}}
        </div>
    </div>

    {{-- Stats Cards --}}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <h4 class="text-warning mb-1">{{ $outlets->count() }}</h4>
                <p class="mb-0 text-muted">Total Outlets</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #28a745;">
                <h4 class="text-success mb-1">{{ $outlets->where('shop_count', '>', 0)->count() }}</h4>
                <p class="mb-0 text-muted">With Shops</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #007bff;">
                <h4 class="text-primary mb-1">{{ $outlets->groupBy('food_court_id')->count() }}</h4>
                <p class="mb-0 text-muted">Food Courts</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #6f42c1;">
                <h4 class="text-purple mb-1">{{ $outlets->where('status', 'active')->count() }}</h4>
                <p class="mb-0 text-muted">Active Outlets</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-utensils me-2 text-warning"></i>Outlet 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="outletTable" class="table table-bordered dt-responsive nowrap w-100">
                <thead class="table-light">
                    <tr>
                        <th class="text-center" width="60">Sr.</th>
                        <th>Food Court Information</th>
                        <th>Contact Person</th>
                        <th>Shop Details</th>
                        <th class="text-center">Food Court ID</th>
                        <th class="text-center">User</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Created Date</th>
                        <th class="text-center" width="180">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($outlets as $key => $outlet)
                        <tr>
                            <td class="text-center">
                                <span class="badge bg-light text-dark">{{ $key + 1 }}</span>
                            </td>

                            {{-- Food Court Information --}}
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-warning rounded-circle d-flex align-items-center justify-content-center me-2">
                                        <span class="text-white fw-bold">{{ substr($outlet->outlet_name, 0, 2) }}</span>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ $outlet->outlet_name }}</h6>
                                        @if ($outlet->tenant)
                                            <small class="text-muted">Tenant: {{ $outlet->tenant->tenant_name }}</small>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            {{-- Contact Person --}}
                            <td>
                                <div>
                                    <h6 class="mb-0">{{ $outlet->outlet_contact_name }}</h6>
                                    <div class="contact-info">
                                        <i class="fas fa-envelope me-1 text-muted"></i>
                                        <small>{{ $outlet->outlet_contact_email }}</small>
                                    </div>
                                    <div class="contact-info">
                                        <i class="fas fa-phone me-1 text-muted"></i>
                                        <small>{{ $outlet->outlet_contact_phone }}</small>
                                    </div>
                                </div>
                            </td>

                            {{-- Shop Details --}}
                            <td>
                                <div class="food-court-info">
                                    @if ($outlet->shop_count)
                                        <span class="badge bg-success shop-count-badge">
                                            <i class="fas fa-store me-1"></i>{{ $outlet->shop_count }} Shops
                                        </span>
                                    @else
                                        <span class="badge bg-light text-muted shop-count-badge">
                                            <i class="fas fa-store me-1"></i>No Shops
                                        </span>
                                    @endif

                                    @if ($outlet->id)
                                        <span class="badge bg-info food-court-badge">
                                            <i class="fas fa-id-card me-1"></i>ID: {{ $outlet->id }}
                                        </span>
                                    @endif
                                </div>
                                @if ($outlet->created_by)
                                    <small class="text-muted mt-1 d-block">
                                        <i class="fas fa-user me-1"></i>Created by:
                                        {{ $outlet->creator->name ?? 'System' }}
                                    </small>
                                @endif
                            </td>

                            {{-- Food Court ID --}}
                            <td class="text-center">
                                @if ($outlet->id)
                                    <span class="badge bg-primary shop-count-badge">
                                        {{ $outlet->id }}
                                    </span>
                                @else
                                    <span class="badge bg-secondary shop-count-badge">
                                        N/A
                                    </span>
                                @endif
                            </td>

                            {{-- User Column --}}
                            <td class="text-center">
                                <div class="d-flex justify-content-center align-items-center gap-1">
                                    <a href="{{ route('outlet.show', $outlet->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($outlet->users) }}</span>
                                </div>
                            </td>

                            {{-- Status --}}
                            <td class="text-center">
                                @if ($outlet->status == 'active')
                                    <span class="badge bg-success status-badge">
                                        <i class="fas fa-check-circle me-1"></i>Active
                                    </span>
                                @else
                                    <span class="badge bg-danger status-badge">
                                        <i class="fas fa-times-circle me-1"></i>Inactive
                                    </span>
                                @endif
                            </td>

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

                            {{-- Actions --}}
                            <td class="text-center">
                                <div class="action-buttons">
                                    <a href="{{ route('outlet.show2', $outlet->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('outlet.edit', $outlet->id) }}"
                                        class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip"
                                        title="Edit Outlet">
                                        <i class="far fa-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-outlet"
                                        data-id="{{ $outlet->id }}" data-name="{{ $outlet->outlet_name }}"
                                        data-bs-toggle="tooltip" title="Delete Outlet">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>

                                {{-- Hidden delete form --}}
                                <form id="delete-form-{{ $outlet->id }}"
                                    action="{{ route('outlet.destroy', $outlet->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 = $('#outletTable').DataTable({
                responsive: true,
                order: [[7, 'desc']], // Order by created date (column 7)
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search outlets...",
                    lengthMenu: "_MENU_ entries per page",
                    info: "Showing _START_ to _END_ of _TOTAL_ outlets",
                    infoEmpty: "No outlets available",
                    infoFiltered: "(filtered from _MAX_ total outlets)",
                    emptyTable: "No outlet data available",
                    zeroRecords: "No matching outlets found"
                },
                columnDefs: [
                    { orderable: false, targets: [0, 8] }, // Sr.No and Actions columns not sortable
                    { searchable: false, targets: [0, 4, 5, 8] }, // These columns not searchable
                    { className: "text-center", targets: [0, 4, 5, 6, 7, 8] } // 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();
                }
            });

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

                Swal.fire({
                    title: 'Delete Outlet?',
                    html: `Are you sure you want to delete <strong>"${outletName}"</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-' + outletId).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