@extends('layouts.master')

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

        .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;
        }

        .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;
        }

        .avatar-sm {
            width: 40px;
            height: 40px;
        }
    </style>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Management
        @endslot
        @slot('title')
            Tenants
        @endslot
    @endcomponent

    {{-- 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">{{ $stats['total'] }}</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">{{ $stats['active'] }}</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">{{ $stats['inactive'] }}</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">{{ $stats['restaurant'] }}</h4>
                <p class="mb-0 text-muted">Restaurant</p>
            </div>
        </div>
    </div>

    {{-- Main Table --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="card-title">
                            <i class="fas fa-list me-2 text-primary"></i>Tenant Directory
                        </h4>
                    </div>

                    <table id="tenant-datatable" class="table table-bordered dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>@lang('translation.tenant_name')</th>
                                <th>Contact Person</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>@lang('translation.tenant_type')</th>
                                <th>@lang('translation.status')</th>
                                <th>Branches</th>
                                <th>Created</th>
                                <th>@lang('translation.Action')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </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/pdfmakebuild/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/pdfmakebuild/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>

    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('#tenant-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('tenant.index') }}",
                    type: 'GET',
                    error: function(xhr, error, code) {
                        console.log('AJAX Error:', xhr.responseText);
                        alert('Error loading data. Please check console.');
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'tenant_name',
                        name: 'tenant_name',
                        render: function(data, type, row) {
                            var initials = data.substring(0, 2).toUpperCase();
                            return '<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">' + initials + '</span>' +
                                '</div>' +
                                '<div>' +
                                '<h6 class="mb-0">' + data + '</h6>' +
                                '<small class="text-muted">ID: ' + row.id + '</small>' +
                                '</div></div>';
                        }
                    },
                    {
                        data: 'contact_person_name',
                        name: 'contact_person_name'
                    },
                    {
                        data: 'contact_person_email',
                        name: 'contact_person_email'
                    },
                    {
                        data: 'contact_person_phone',
                        name: 'contact_person_phone'
                    },
                    {
                        data: 'tenant_type',
                        name: 'tenant_type',
                        render: function(data) {
                            if (data == 'Restaurant') {
                                return '<span class="badge bg-info tenant-type-badge">' +
                                    '<i class="fas fa-utensils me-1"></i>Restaurant</span>';
                            } else {
                                return '<span class="badge bg-warning tenant-type-badge">' +
                                    '<i class="fas fa-shopping-bag me-1"></i>Food Court</span>';
                            }
                        }
                    },
                    {
                        data: 'status',
                        name: 'status',
                        render: function(data) {
                            if (data == 'active') {
                                return '<span class="badge bg-success status-badge">' +
                                    '<i class="fas fa-check-circle me-1"></i>Active</span>';
                            } else {
                                return '<span class="badge bg-danger status-badge">' +
                                    '<i class="fas fa-times-circle me-1"></i>Inactive</span>';
                            }
                        }
                    },
                    {
                        data: 'branch_count',
                        name: 'branch_count',
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            return '<span class="badge bg-primary">' + data + '</span>';
                        }
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            // Determine the URL based on tenant_type
                            var addButton = '';
                            if (row.tenant_type == 'Restaurant') {
                                addButton = '<a href="' + row.branch_url +
                                    '" target="_blank" class="btn btn-sm btn-outline-success me-1" title="Add Branch">' +
                                    '<i class="fas fa-plus"></i></a>';
                            } else {
                                addButton = '<a href="' + row.outlet_url +
                                    '" target="_blank" class="btn btn-sm btn-outline-success me-1" title="Add Outlet">' +
                                    '<i class="fas fa-store"></i></a>';
                            }

                            return '<div class="action-buttons d-flex">' +
                                '<a href="' + row.view_url +
                                '" target="_blank" class="btn btn-sm btn-outline-info me-1" title="View">' +
                                '<i class="far fa-eye"></i></a>' +
                                '<a href="' + row.edit_url +
                                '" target="_blank" class="btn btn-sm btn-outline-primary me-1" title="Edit">' +
                                '<i class="far fa-edit"></i></a>' +
                                addButton +
                                '<button type="button" class="btn btn-sm btn-outline-danger deleterow" ' +
                                'data-id="' + row.id + '" data-name="' + row.tenant_name +
                                '" title="Delete">' +
                                '<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>';
                        }
                    }
                ],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                dom: 'Bfrtip',
                responsive: true,
                order: [
                    [8, 'desc']
                ]
            });

            // Delete functionality
            $('#tenant-datatable').on('click', '.deleterow', function(e) {
                e.preventDefault();
                var tenantId = $(this).data('id');
                var tenantName = $(this).data('name');

                if (confirm('Are you sure you want to delete "' + tenantName + '"?')) {
                    $('#delete-form-' + tenantId).submit();
                }
            });
        });

        // Session messages
        @if (session('success'))
            alert('Success: {{ session('success') }}');
        @endif

        @if (session('error'))
            alert('Error: {{ session('error') }}');
        @endif
    </script>
@endsection