@extends('backend.app')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">Memories</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">Memories</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Memories List</h4>
                    <a href="{{ route('admin.memories.create') }}" class="btn btn-primary ms-auto">Create New Memory</a>
                </div>

                <div class="card-body">
                    <!-- Language Selection Tabs -->
                    <ul class="nav nav-tabs mb-4" id="indexLangTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-lang="en" type="button" role="tab" style="font-weight: 600;">English</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-lang="fr" type="button" role="tab" style="font-weight: 600;">French</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-lang="gr" type="button" role="tab" style="font-weight: 600;">German</button>
                        </li>
                    </ul>

                    <div class="table-responsive">
                        <table id="memoriesTable" class="table table-bordered table-striped w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Date of Birth</th>
                                    <th>Date of Death</th>
                                    <th>City</th>
                                    <th>Country</th>
                                    <th>Cemetery name</th>
                                    <th>Cemetery City</th>
                                    <th>Family Account</th>
                                    <th>Profile Photo</th>
                                    <th>Cover Photo</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be populated by DataTables via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            var table;

            function initializeTable(lang) {
                if ($.fn.DataTable.isDataTable('#memoriesTable')) {
                    $('#memoriesTable').DataTable().destroy();
                }

                table = $('#memoriesTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('admin.memories.index') }}",
                    columns: [
                        {
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'name_' + lang,
                            name: 'name_' + lang,
                            defaultContent: 'N/A'
                        },
                        {
                            data: 'dob_en',
                            name: 'dob_en',
                            defaultContent: 'N/A'
                        },
                        {
                            data: 'dod_en',
                            name: 'dod_en',
                            defaultContent: 'N/A'
                        },
                        {
                            data: 'city_' + lang,
                            name: 'city_' + lang,
                            defaultContent: 'N/A'
                        },
                        {
                            data: 'country_' + lang,
                            name: 'country_' + lang,
                            defaultContent: 'N/A'
                        },
                        {
                            data: 'cemetery_name_' + lang,
                            name: 'cemetery_name_' + lang,
                            defaultContent: 'N/A'
                        },
                        {
                            data: 'cemetery_city_' + lang,
                            name: 'cemetery_city_' + lang,
                            defaultContent: 'N/A'
                        },
                        {
                            data: 'family_account.name_' + lang,
                            name: 'familyAccount.name_' + lang,
                            defaultContent: 'N/A'
                        },
                        {
                            data: 'profile_photo',
                            name: 'profile_photo',
                            orderable: false,
                            searchable: false,
                            render: function(data, type, full, meta) {
                                if (data) {
                                    if (data.includes('<img')) return data;
                                    return '<img src="' + data + '" alt="Profile Photo" width="50" height="50" style="object-fit: cover; border-radius: 4px;">';
                                }
                                return 'N/A';
                            }
                        },
                        {
                            data: 'cover_photo',
                            name: 'cover_photo',
                            orderable: false,
                            searchable: false,
                            render: function(data, type, full, meta) {
                                if (data) {
                                    if (data.includes('<img')) return data;
                                    return '<img src="' + data + '" alt="Cover Photo" width="50" height="50" style="object-fit: cover; border-radius: 4px;">';
                                }
                                return 'N/A';
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });
            }

            // Initialize default table (English)
            initializeTable('en');

            // Handle tab changes
            $('#indexLangTabs button').on('click', function(e) {
                e.preventDefault();
                $('#indexLangTabs button').removeClass('active');
                $(this).addClass('active');

                var lang = $(this).data('lang');
                initializeTable(lang);
            });
        });
    </script>
@endpush