@extends('layouts.layout')

@section('content')
    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>

        <div class="page-heading">
            <div class="page-title">
                <div class="row">
                    <div class="col-12 col-md-6 order-md-1 order-last">
                        <h3>About Us Management</h3>
                        <p class="text-subtitle text-muted">Manage and view About Us content</p>
                    </div>
                    <div class="col-12 col-md-6 order-md-2 order-first">
                        <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Pages -> About Us</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            {{-- Add About Us Form --}}
            <section id="basic-vertical-layouts">
                <div class="row match-height">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Add New About Us</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-vertical" action="{{ route('about.store') }}" method="POST">
                                        @csrf
                                        
                                        <div class="form-body">
                                            <div class="row">

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="dear_value_customer">Dear Value Customer <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-heart"></i></span>
                                                            <textarea id="dear_value_customer" class="form-control @error('dear_value_customer') is-invalid @enderror"
                                                                name="dear_value_customer" rows="3" placeholder="Enter dear value customer content..." required>{{ old('dear_value_customer') }}</textarea>
                                                            @error('dear_value_customer')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="company_overview">Company Overview <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-building"></i></span>
                                                            <textarea id="company_overview" class="form-control @error('company_overview') is-invalid @enderror"
                                                                name="company_overview" rows="3" placeholder="Enter company overview..." required>{{ old('company_overview') }}</textarea>
                                                            @error('company_overview')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="vision_mission">Vision & Mission <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i class="bi bi-eye"></i></span>
                                                            <textarea id="vision_mission" class="form-control @error('vision_mission') is-invalid @enderror" name="vision_mission"
                                                                rows="3" placeholder="Enter vision and mission..." required>{{ old('vision_mission') }}</textarea>
                                                            @error('vision_mission')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="our_people">Our People <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-people"></i></span>
                                                            <textarea id="our_people" class="form-control @error('our_people') is-invalid @enderror" name="our_people"
                                                                rows="3" placeholder="Enter our people content..." required>{{ old('our_people') }}</textarea>
                                                            @error('our_people')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="company_profile">Company Profile <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-file-earmark-text"></i></span>
                                                            <textarea id="company_profile" class="form-control @error('company_profile') is-invalid @enderror"
                                                                name="company_profile" rows="3" placeholder="Enter company profile..." required>{{ old('company_profile') }}</textarea>
                                                            @error('company_profile')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="about_caption">About Caption <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-chat-quote"></i></span>
                                                            <textarea id="about_caption" class="form-control @error('about_caption') is-invalid @enderror" name="about_caption"
                                                                rows="3" placeholder="Enter about caption..." required>{{ old('about_caption') }}</textarea>
                                                            @error('about_caption')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 d-flex justify-content-end gap-2">
                                                    <button type="submit" class="btn btn-primary me-1 mb-1">
                                                        <i class="bi bi-plus-circle me-1"></i> Add About Us
                                                    </button>
                                                    <button type="reset" class="btn btn-light-secondary me-1 mb-1">
                                                        <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
                                                    </button>
                                                </div>

                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- About Us List Table --}}
            <section class="section">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="card-title mb-0">
                                    <i class="bi bi-info-circle me-2 text-primary"></i>About Us List
                                </h4>
                                <span class="badge bg-primary rounded-pill">{{ count($about) }} Records</span>
                            </div>

                            <div class="card-body">
                                <div class="mb-3">
                                    <input type="text" id="searchInput" class="form-control"
                                        placeholder="Search by content...">
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-hover table-bordered align-middle mb-0" id="aboutTable">
                                        <thead class="table-primary">
                                            <tr>
                                                <th class="text-center" style="width: 60px;">ID</th>
                                                <th>DEAR VALUE CUSTOMER</th>
                                                <th>COMPANY OVERVIEW</th>
                                                <th>VISION & MISSION</th>
                                                <th>OUR PEOPLE</th>
                                                <th>COMPANY PROFILE</th>
                                                <th>ABOUT CAPTION</th>
                                                <th class="text-center" style="width: 140px;">CREATED AT</th>
                                                <th class="text-center" style="width: 140px;">UPDATED AT</th>
                                                <th class="text-center" style="width: 100px;">ACTION</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableBody">

                                            @forelse ($about as $item)
                                                
                                                <tr>
                                                    <td class="text-center">
                                                        <span class="badge text-secondary">{{ $item['id'] }}</span>
                                                    </td>
                                                    <td style="max-width:150px;">
                                                        <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;"
                                                            title="{{ $item['dear_value_customer'] ?? '' }}">
                                                            {{ $item['dear_value_customer'] ?? 'N/A' }}
                                                        </div>
                                                    </td>
                                                    <td style="max-width:150px;">
                                                        <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;"
                                                            title="{{ $item['company_overview'] ?? '' }}">
                                                            {{ $item['company_overview'] ?? 'N/A' }}
                                                        </div>
                                                    </td>
                                                    <td style="max-width:150px;">
                                                        <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;"
                                                            title="{{ $item['vision_mission'] ?? '' }}">
                                                            {{ $item['vision_mission'] ?? 'N/A' }}
                                                        </div>
                                                    </td>
                                                    <td style="max-width:150px;">
                                                        <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;"
                                                            title="{{ $item['our_people'] ?? '' }}">
                                                            {{ $item['our_people'] ?? 'N/A' }}
                                                        </div>
                                                    </td>
                                                    <td style="max-width:150px;">
                                                        <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;"
                                                            title="{{ $item['company_profile'] ?? '' }}">
                                                            {{ $item['company_profile'] ?? 'N/A' }}
                                                        </div>
                                                    </td>
                                                    <td style="max-width:150px;">
                                                        <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;"
                                                            title="{{ $item['about_caption'] ?? '' }}">
                                                            {{ $item['about_caption'] ?? 'N/A' }}
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        @if (!empty($item['created_at']))
                                                            <i class="bi bi-calendar3 me-1"></i>
                                                            {{ \Carbon\Carbon::parse($item['created_at'])->format('d M Y') }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        @if (!empty($item['updated_at']))
                                                            <i class="bi bi-calendar3 me-1"></i>
                                                            {{ \Carbon\Carbon::parse($item['updated_at'])->format('d M Y') }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>

                                                    <td>
                                                        <div class="d-flex justify-content-center gap-1">
                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-primary btn-edit"
                                                                data-bs-toggle="modal" data-bs-target="#editAboutModal"
                                                                data-id="{{ $item['id'] }}"
                                                                data-dear-value-customer="{{ $item['dear_value_customer'] ?? '' }}"
                                                                data-company-overview="{{ $item['company_overview'] ?? '' }}"
                                                                data-vision-mission="{{ $item['vision_mission'] ?? '' }}"
                                                                data-our-people="{{ $item['our_people'] ?? '' }}"
                                                                data-company-profile="{{ $item['company_profile'] ?? '' }}"
                                                                data-about-caption="{{ $item['about_caption'] ?? '' }}">
                                                                <i class="bi bi-pencil"></i>
                                                            </button>

                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-danger btn-delete"
                                                                data-id="{{ $item['id'] }}"
                                                                data-label="{{ Str::limit($item['dear_value_customer'] ?? 'this record', 40) }}">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="10" class="text-center py-4 text-muted">
                                                            <i class="bi bi-inbox fs-3 d-block mb-2"></i>No About Us content
                                                            found.
                                                        </td>
                                                    </tr>
                                            @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            @include('layouts.footer')
        </div>

        {{-- ==================== TOAST ==================== --}}
        <div id="toastContainer"
            style="position:fixed;top:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;"></div>

        @if (session('success'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    showToast('success', 'Success', '{{ session('success') }}');
                });
            </script>
        @endif
        @if (session('error'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    showToast('error', 'Error', '{{ session('error') }}');
                });
            </script>
        @endif

        {{-- ==================== EDIT MODAL ==================== --}}
        <div class="modal fade" id="editAboutModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">

                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">
                            <i class="bi bi-pencil-square me-2"></i>Edit About Us
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>

                    <form id="editAboutForm" method="POST" action="">
                        @csrf
                        @method('POST')
                        <div class="modal-body px-4 py-3">
                            <div class="row g-3">

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Dear Value Customer <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-heart"></i></span>
                                        <textarea class="form-control" id="edit_dear_value_customer" name="dear_value_customer" rows="3" minlength="10" required></textarea>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Company Overview <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-building"></i></span>
                                        <textarea class="form-control" id="edit_company_overview" name="company_overview" rows="3" minlength="10" required></textarea>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Vision & Mission <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-eye"></i></span>
                                        <textarea class="form-control" id="edit_vision_mission" name="vision_mission" rows="3" minlength="10" required></textarea>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Our People <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-people"></i></span>
                                        <textarea class="form-control" id="edit_our_people" name="our_people" rows="3" minlength="10" required></textarea>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Company Profile <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-file-earmark-text"></i></span>
                                        <textarea class="form-control" id="edit_company_profile" name="company_profile" rows="3" minlength="10" required></textarea>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">About Caption <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-chat-quote"></i></span>
                                        <textarea class="form-control" id="edit_about_caption" name="about_caption" rows="3" minlength="10" required></textarea>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                                <i class="bi bi-x-circle me-1"></i> Cancel
                            </button>
                            <button type="submit" class="btn btn-primary" id="editSubmitBtn">
                                <i class="bi bi-check-circle me-1"></i> Save Changes
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>

        {{-- ==================== DELETE MODAL ==================== --}}
        <div class="modal fade" id="deleteAboutModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title">
                            <i class="bi bi-exclamation-triangle me-2"></i>Confirm Delete
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center py-4">
                        <i class="bi bi-trash3 text-danger" style="font-size: 3rem;"></i>
                        <h5 class="mt-3">Are you sure?</h5>
                        <p class="text-muted mb-0">
                            You are about to delete: <br>
                            <strong id="deleteAboutLabel"></strong><br>
                            This action <span class="text-danger fw-semibold">cannot be undone</span>.
                        </p>
                    </div>
                    <div class="modal-footer justify-content-center gap-2">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle me-1"></i> Cancel
                        </button>
                        <form id="deleteAboutForm" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger" id="deleteSubmitBtn">
                                <i class="bi bi-trash me-1"></i> Yes, Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // ── Populate Edit Modal ───────────────────────────────────────
            document.querySelectorAll('.btn-edit').forEach(btn => {
                btn.addEventListener('click', function() {
                    const d = this.dataset;
                    document.getElementById('edit_dear_value_customer').value = d.dearValueCustomer;
                    document.getElementById('edit_company_overview').value = d.companyOverview;
                    document.getElementById('edit_vision_mission').value = d.visionMission;
                    document.getElementById('edit_our_people').value = d.ourPeople;
                    document.getElementById('edit_company_profile').value = d.companyProfile;
                    document.getElementById('edit_about_caption').value = d.aboutCaption;
                    document.getElementById('editAboutForm').action = `about/${d.id}`;
                });
            });

            // ── Delete Modal ──────────────────────────────────────────────
            document.querySelectorAll('.btn-delete').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.getElementById('deleteAboutLabel').textContent = this.dataset.label;
                    document.getElementById('deleteAboutForm').action = `about/${this.dataset.id}`;
                    new bootstrap.Modal(document.getElementById('deleteAboutModal')).show();
                });
            });

            document.getElementById('deleteAboutForm').addEventListener('submit', function() {
                const btn = document.getElementById('deleteSubmitBtn');
                btn.disabled = true;
                btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Deleting...';
            });

            document.getElementById('editAboutForm').addEventListener('submit', function() {
                const btn = document.getElementById('editSubmitBtn');
                btn.disabled = true;
                btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Saving...';
            });

            // ── Live Search ───────────────────────────────────────────────
            document.getElementById('searchInput').addEventListener('keyup', function() {
                const query = this.value.toLowerCase();
                document.querySelectorAll('#tableBody tr').forEach(row => {
                    row.style.display = row.textContent.toLowerCase().includes(query) ? '' : 'none';
                });
            });

            // ── Toast ─────────────────────────────────────────────────────
            function showToast(type, title, message, duration = 4000) {
                const container = document.getElementById('toastContainer');
                const toast = document.createElement('div');
                const isSuccess = type === 'success';
                toast.style.cssText =
                    `display:flex;align-items:flex-start;gap:12px;background:var(--color-background-primary,#fff);border:0.5px solid #ddd;border-radius:12px;padding:14px 16px;min-width:300px;max-width:380px;border-left:3px solid ${isSuccess?'#1D9E75':'#E24B4A'};animation:toastIn .3s ease;`;
                toast.innerHTML = `
            <div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:500;background:${isSuccess?'#E1F5EE':'#FCEBEB'};color:${isSuccess?'#0F6E56':'#A32D2D'};">${isSuccess?'✓':'✕'}</div>
            <div style="flex:1;"><p style="font-size:14px;font-weight:500;margin:0 0 2px;">${title}</p><p style="font-size:13px;color:#666;margin:0;">${message}</p></div>
            <button onclick="this.parentElement.remove()" style="font-size:18px;background:none;border:none;cursor:pointer;color:#999;padding:0;line-height:1;">×</button>
        `;
                if (!document.getElementById('toastKeyframes')) {
                    const s = document.createElement('style');
                    s.id = 'toastKeyframes';
                    s.textContent =
                        '@keyframes toastIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}';
                    document.head.appendChild(s);
                }
                container.appendChild(toast);
                setTimeout(() => toast.remove(), duration);
            }
        </script>
    @endsection