@extends('layouts.master')

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

@section('css')
    <!--datatable css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.bootstrap5.min.css">
    <style>
        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
        .tenant-type-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, #667eea 0%, #764ba2 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 #007bff;
        }
    </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.Tenant_List')</h3>
                <p class="mb-0 opacity-75">Manage and monitor all tenant information</p>
            </div>
            <a href="{{ route('tenant.create') }}" 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-primary mb-1">{{ $data->count() }}</h4>
                <p class="mb-0 text-muted">Total Tenants</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #28a745;">
                <h4 class="text-success mb-1">{{ $data->where('status', 'active')->count() }}</h4>
                <p class="mb-0 text-muted">Active Tenants</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #ffc107;">
                <h4 class="text-warning mb-1">{{ $data->where('status', 'inactive')->count() }}</h4>
                <p class="mb-0 text-muted">Inactive Tenants</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="border-left-color: #17a2b8;">
                <h4 class="text-info mb-1">{{ $data->where('tenant_type', 'Restaurant')->count() }}</h4>
                <p class="mb-0 text-muted">Restaurant</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-list me-2 text-primary"></i>Tenant Directory
            </h5>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary btn-sm" id="exportBtn">
                    <i class="fas fa-download me-1"></i>Export
                </button>
                <button class="btn btn-outline-info btn-sm" id="refreshBtn">
                    <i class="fas fa-sync-alt me-1"></i>Refresh
                </button>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover yajra-datatable" id="tenantTable">
                <thead class="table-light">
                    <tr>
                        <th class="text-center" width="60">Sr.</th>
                        <th>@lang('translation.tenant_name')</th>
                        <th>Contact Person</th>
                        <th>Contact Details</th>
                        <th class="text-center">@lang('translation.tenant_type')</th>
                        <th class="text-center">@lang('translation.status')</th>
                        <th class="text-center">@lang('translation.branch_count')</th>
                        <th class="text-center">@lang('translation.created_date')</th>
                        <th class="text-center" width="200">@lang('translation.Action')</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $key => $tenant)
                        <tr>
                            <td class="text-center">
                                <span class="badge bg-light text-dark">{{ $key + 1 }}</span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center me-2">
                                        <span class="text-white fw-bold">{{ substr($tenant->tenant_name, 0, 2) }}</span>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ $tenant->tenant_name }}</h6>
                                        <small class="text-muted">ID: {{ $tenant->id }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div>
                                    <h6 class="mb-0">{{ $tenant->contact_person_name }}</h6>
                                    <small class="text-muted">Contact Person</small>
                                </div>
                            </td>
                            <td>
                                <div class="contact-details">
                                    <div class="mb-1">
                                        <i class="fas fa-envelope me-1 text-muted"></i>
                                        <small>{{ $tenant->contact_person_email }}</small>
                                    </div>
                                    <div>
                                        <i class="fas fa-phone me-1 text-muted"></i>
                                        <small>{{ $tenant->contact_person_phone }}</small>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                @if($tenant->tenant_type == 'Restaurant')
                                    <span class="badge bg-info tenant-type-badge">
                                        <i class="fas fa-utensils me-1"></i>Restaurant
                                    </span>
                                @else
                                    <span class="badge bg-warning tenant-type-badge">
                                        <i class="fas fa-shopping-bag me-1"></i>Food Court
                                    </span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if($tenant->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>
                            <td class="text-center">
                                @if($tenant->tenant_type == 'Restaurant')
                                    <span class="badge bg-success status-badge">
                                        {{count($tenant->branches)}}
                                    </span>
                                @else
                                    <span class="badge bg-danger status-badge">
                                        {{count($tenant->outlets)}}
                                    </span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div>
                                    <strong>{{ $tenant->created_at->format('d M Y') }}</strong>
                                </div>
                                <small class="text-muted">{{ $tenant->created_at->format('H:i A') }}</small>
                            </td>
                            <td class="text-center">
                                <div class="action-buttons">
                                    <a href="{{ route('tenant.show', $tenant->id) }}"
                                       class="btn btn-sm btn-outline-info"
                                       data-bs-toggle="tooltip"
                                       title="View Details">
                                        <i class="far fa-eye"></i>
                                    </a>
                                    <a href="{{ route('tenant.edit', $tenant->id) }}"
                                       class="btn btn-sm btn-outline-primary"
                                       data-bs-toggle="tooltip"
                                       title="Edit Tenant">
                                        <i class="far fa-edit"></i>
                                    </a>
                                    <a href="{{ route('branch.edit2', $tenant->id) }}"
                                       class="btn btn-sm btn-outline-success"
                                       data-bs-toggle="tooltip"
                                       title="Manage Branches">
                                        <i class="fas fa-code-branch"></i>
                                    </a>
                                    <button type="button"
                                            class="btn btn-sm btn-outline-danger deleterow"
                                            data-id="{{ $tenant->id }}"
                                            data-name="{{ $tenant->tenant_name }}"
                                            data-bs-toggle="tooltip"
                                            title="Delete Tenant">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>

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

@endsection

@section('scripts')
    <!-- jQuery (load first) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.0/js/responsive.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>

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

    <script>
        $(document).ready(function() {
            // Initialize tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // Initialize DataTable with enhanced features
            var table = $('#tenantTable').DataTable({
                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>>',
                buttons: [
                    {
                        extend: 'excel',
                        text: '<i class="fas fa-file-excel"></i> Excel',
                        className: 'btn btn-success btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6]
                        }
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fas fa-file-pdf"></i> PDF',
                        className: 'btn btn-danger btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6]
                        }
                    },
                    {
                        extend: 'csv',
                        text: '<i class="fas fa-file-csv"></i> CSV',
                        className: 'btn btn-info btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6]
                        }
                    }
                ],
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search tenants...",
                    lengthMenu: "_MENU_ entries per page",
                    info: "Showing _START_ to _END_ of _TOTAL_ tenants",
                    infoEmpty: "No tenants available",
                    infoFiltered: "(filtered from _MAX_ total tenants)",
                    emptyTable: "No tenant data available",
                    zeroRecords: "No matching tenants found"
                },
                order: [[6, 'desc']], // Order by created date descending
                columnDefs: [
                    { orderable: false, targets: [7] }, // Disable ordering on action column
                    { searchable: false, targets: [0, 7] }, // Disable search on Sr. and Action columns
                    { className: "text-center", targets: [0, 4, 5, 6, 7] }
                ]
            });

            // Export button functionality
            $('#exportBtn').on('click', function() {
                // Create a temporary container for export buttons
                var exportButtons = $('<div>').addClass('export-buttons');
                table.buttons().container().appendTo(exportButtons);

                Swal.fire({
                    title: 'Export Data',
                    html: 'Choose your preferred export format:',
                    showConfirmButton: false,
                    showCancelButton: true,
                    cancelButtonText: 'Close',
                    footer: exportButtons.html(),
                    customClass: {
                        footer: 'text-center'
                    }
                });
            });

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

                // Add spinning animation
                icon.addClass('fa-spin');
                button.prop('disabled', true);

                // Simulate refresh delay
                setTimeout(function() {
                    table.ajax.reload ? table.ajax.reload() : location.reload();
                    icon.removeClass('fa-spin');
                    button.prop('disabled', false);
                }, 1000);
            });

            // Enhanced delete confirmation
            $(document).on('click', '.deleterow', function(e) {
                e.preventDefault();

                var tenantId = $(this).data('id');
                var tenantName = $(this).data('name');

                Swal.fire({
                    title: 'Delete Tenant?',
                    html: `Are you sure you want to delete <strong>"${tenantName}"</strong>?<br><br>
                           <small class="text-muted">This action cannot be undone and will remove all associated data.</small>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="fas fa-trash"></i> Yes, delete it!',
                    cancelButtonText: '<i class="fas fa-times"></i> Cancel',
                    customClass: {
                        confirmButton: 'btn btn-danger',
                        cancelButton: 'btn btn-secondary'
                    },
                    buttonsStyling: false,
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Show loading state
                        Swal.fire({
                            title: 'Deleting...',
                            text: 'Please wait while we delete the tenant.',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        // Submit the form
                        document.getElementById('delete-form-' + tenantId).submit();
                    }
                });
            });

            // Add row hover effects
            $('#tenantTable tbody').on('mouseenter', 'tr', function() {
                $(this).addClass('table-active');
            }).on('mouseleave', 'tr', function() {
                $(this).removeClass('table-active');
            });

            // Status filter functionality
            $('#statusFilter').on('change', function() {
                var status = $(this).val();
                if (status === '') {
                    table.column(5).search('').draw();
                } else {
                    table.column(5).search(status).draw();
                }
            });

            // Tenant type filter functionality
            $('#typeFilter').on('change', function() {
                var type = $(this).val();
                if (type === '') {
                    table.column(4).search('').draw();
                } else {
                    table.column(4).search(type).draw();
                }
            });
        });

        // Show success/error messages from session
        @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