@php
    $breadcrumbs = [
        'Manage Index' => '',
    ];
@endphp

@extends('layouts.master')

@section('title')
    Manage Index
@endsection

@section('style')
    <style>
        .theme-thumb {
            width: 220px;
            height: 90px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #e2e2e2;
        }
        .theme-thumb-placeholder {
            width: 220px;
            height: 90px;
            border-radius: 6px;
            border: 1px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            font-size: 12px;
        }
        .order-btns a {
            display: inline-block;
            margin-right: 4px;
        }
        .subtitle-preview {
            font-size: 12px;
            color: #777;
            white-space: pre-line;
        }
        .link-thumb {
            width: 90px;
            height: 56px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #e2e2e2;
        }
        .link-thumb-placeholder {
            width: 90px;
            height: 56px;
            border-radius: 4px;
            border: 1px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            font-size: 10px;
        }
        .link-desc-preview {
            font-size: 12px;
            color: #777;
        }
    </style>
@endsection

@section('content')

    <section class="wrapper bg-light">
        <div class="container py-14">

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <p class="text-muted mb-4" style="font-size: 13px">
                * แต่ละ <b>Theme</b> คือหน้า index แบบเต็ม 1 ชุด (ชื่อหลัก + ชื่อรอง + ภาพพื้นหลัง)<br>
                * ถ้ามี Theme ที่ Active มากกว่า 1 อัน หน้า index จะแสดงเป็นสไลด์ เปลี่ยนทั้งชุดไปพร้อมกัน — ถ้ามี Active แค่อันเดียวจะแสดงแบบนิ่งอันเดียว<br>
                * ลำดับ (Order) คือลำดับการสไลด์
            </p>

            {{-- การ์ด: ตัวตกแต่งธีมตามฤดูกาล (แยกจาก Theme ของหน้า index ด้านล่าง)
                 เลือกได้อันเดียว มีผลกับ "ทุกหน้า" ในเว็บ (ผ่าน layouts.master) ไม่ใช่แค่หน้า index --}}
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="mb-1" style="font-size: 20px">Seasonal Decoration</h5>
                    <p class="text-muted mb-3" style="font-size: 13px">
                        ตกแต่งเว็บตามฤดูกาล (กิ่ง/มุมจอ + กลีบ-ใบที่ร่วงผ่านหน้าจอ) เลือกได้ทีละอัน มีผล<b>ทุกหน้า</b>ของเว็บ ไม่ใช่แค่หน้า index
                    </p>
                    <div class="btn-group flex-wrap" role="group" aria-label="Seasonal decoration">
                        @php
                            $seasonOptions = [
                                'none'   => 'ปิด (None)',
                                'sakura' => '🌸 ซากุระ',
                                'summer' => '☀️ ฤดูร้อน',
                                'rainy'  => '🌧️ ฤดูฝน',
                                'autumn' => '🍂 ใบไม้ร่วง',
                                'winter' => '❄️ ฤดูหนาว',
                            ];
                        @endphp
                        @foreach($seasonOptions as $value => $label)
                            <a href="{{ url('/site_theme_set/'.$value) }}"
                               class="btn btn-sm rounded-pill me-2 mb-2 {{ ($activeSeason ?? 'none') === $value ? 'btn-violet' : 'btn-outline-secondary' }}">
                                {{ $label }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0" style="font-size: 20px">Themes</h5>
                        <button type="button" class="btn btn-sm btn-violet rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#themeModal" onclick="openAddTheme()">
                            <i class="uil uil-plus"></i> Add Theme
                        </button>
                    </div>

                    <div class="table-responsive">
                        <table width="100%" class="table table-striped table-condensed align-middle">
                            <thead>
                                <tr>
                                    <th style="width: 5%">Order</th>
                                    <th style="width: 20%">Preview</th>
                                    <th>Title / Subtitle</th>
                                    <th style="text-align: center; width: 8%">Status</th>
                                    <th style="text-align: center; width: 20%">Manage</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($themes as $theme)
                                    <tr>
                                        <td class="order-btns">
                                            {{ $loop->iteration }}
                                            <br>
                                            <a href="{{ url('/index_theme_move/'.$theme->index_theme_id.'/up') }}" title="Move Up">
                                                <i class="uil uil-arrow-up"></i>
                                            </a>
                                            <a href="{{ url('/index_theme_move/'.$theme->index_theme_id.'/down') }}" title="Move Down">
                                                <i class="uil uil-arrow-down"></i>
                                            </a>
                                        </td>
                                        <td>
                                            @if(!empty($theme->index_theme_banner_image))
                                                <img class="theme-thumb" src="{{ asset('index_banner/'.$theme->index_theme_banner_image) }}" alt="">
                                            @else
                                                <div class="theme-thumb-placeholder">No image</div>
                                            @endif
                                        </td>
                                        <td>
                                            <b>{{ $theme->index_theme_title }}</b>
                                            @if(!empty($theme->index_theme_subtitle))
                                                <div class="subtitle-preview">{{ $theme->index_theme_subtitle }}</div>
                                            @endif
                                        </td>
                                        <td align="center">
                                            @if($theme->index_theme_status == 'active')
                                                <span class="badge bg-success">Active</span>
                                            @else
                                                <span class="badge bg-secondary">Inactive</span>
                                            @endif
                                        </td>
                                        <td align="center">
                                            <button type="button" class="btn btn-circle btn-sm btn-blue" title="Edit"
                                                data-bs-toggle="modal" data-bs-target="#themeModal"
                                                onclick="openEditTheme(
                                                    '{{ $theme->index_theme_id }}',
                                                    {{ json_encode($theme->index_theme_title) }},
                                                    {{ json_encode($theme->index_theme_subtitle) }},
                                                    {{ json_encode($theme->index_theme_banner_image ? asset('index_banner/'.$theme->index_theme_banner_image) : null) }}
                                                )">
                                                <i class="uil uil-edit"></i>
                                            </button>

                                            <a href="{{ url('/index_theme_toggle/'.$theme->index_theme_id) }}"
                                               class="btn btn-circle btn-sm {{ $theme->index_theme_status == 'active' ? 'btn-orange' : 'btn-green' }}"
                                               title="{{ $theme->index_theme_status == 'active' ? 'Set Inactive' : 'Set Active' }}">
                                                <i class="uil {{ $theme->index_theme_status == 'active' ? 'uil-pause' : 'uil-play' }}"></i>
                                            </a>

                                            <a href="{{ url('/index_theme_delete/'.$theme->index_theme_id) }}"
                                               class="btn btn-circle btn-sm btn-red"
                                               title="Delete"
                                               onclick="return confirm('ต้องการลบ Theme นี้ใช่หรือไม่?');">
                                                <i class="uil uil-trash-alt"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">ยังไม่มี Theme กด "Add Theme" เพื่อเริ่มสร้างหน้า index</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            {{-- การ์ด: ลิงก์ Explore More (ส่วนกลาง ใช้ร่วมกันทุก Theme แยกออกมาจากตาราง Theme) --}}
            <div class="card mb-4" id="exploreLinksCard">
                <div class="card-body">
                    <h5 class="mb-1" style="font-size: 20px">Explore More Links</h5>
                    <p class="text-muted mb-3" style="font-size: 13px">
                        การ์ดลิงก์ที่แสดงใต้หัวข้อ <b>Explore More</b> ในหน้า index ใช้ร่วมกันทุก Theme (ไม่ขึ้นกับว่า Theme ไหน Active)
                        ถ้าปิดทุกอัน (Inactive) หัวข้อ Explore More จะไม่แสดง
                    </p>

                    <form method="POST" action="{{ url('/index_theme_link_edit') }}" enctype="multipart/form-data" class="row g-2 mb-4" id="linkForm">
                        {{ csrf_field() }}
                        <input type="hidden" name="index_theme_link_id" id="link_id" value="">

                        <div class="col-md-4">
                            <label class="form-label">Title</label>
                            <input type="text" name="index_theme_link_title" id="link_title" class="form-control" required maxlength="255">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">URL</label>
                            <input type="url" name="index_theme_link_url" id="link_url" class="form-control" placeholder="https://" required maxlength="500">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">รูปภาพ</label>
                            <input type="file" name="index_theme_link_image" id="link_image" class="form-control" accept=".jpg,.jpeg,.png,.webp">
                            <div class="form-text" id="link_image_hint">ไม่บังคับ ถ้าไม่เลือกจะใช้รูป default</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">คำอธิบาย</label>
                            <textarea name="index_theme_link_description" id="link_description" class="form-control" rows="2" maxlength="1000" placeholder="คำอธิบายสั้นๆ ที่จะแสดงใต้ชื่อในการ์ด (ไม่บังคับ)"></textarea>
                        </div>
                        <div class="col-12 text-end">
                            <button type="button" class="btn btn-secondary rounded-pill px-4" id="linkFormCancelBtn" style="display:none;" onclick="resetLinkForm()">Cancel Edit</button>
                            <button type="submit" class="btn btn-violet rounded-pill px-4" id="linkFormSubmitBtn">
                                <i class="uil uil-plus"></i> Add
                            </button>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table width="100%" class="table table-striped table-condensed align-middle">
                            <thead>
                                <tr>
                                    <th style="width: 12%">Image</th>
                                    <th>Title / Description</th>
                                    <th>URL</th>
                                    <th style="text-align:center; width: 10%">Status</th>
                                    <th style="text-align:center; width: 15%">Manage</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($links as $link)
                                    <tr>
                                        <td>
                                            @if(!empty($link->index_theme_link_image))
                                                <img class="link-thumb" src="{{ asset('index_link/'.$link->index_theme_link_image) }}" alt="">
                                            @else
                                                <div class="link-thumb-placeholder">No image</div>
                                            @endif
                                        </td>
                                        <td>
                                            <b>{{ $link->index_theme_link_title }}</b>
                                            @if(!empty($link->index_theme_link_description))
                                                <div class="link-desc-preview">{{ \Illuminate\Support\Str::limit($link->index_theme_link_description, 80) }}</div>
                                            @endif
                                        </td>
                                        <td><a href="{{ $link->index_theme_link_url }}" target="_blank" rel="noopener">{{ $link->index_theme_link_url }}</a></td>
                                        <td align="center">
                                            @if($link->index_theme_link_status == 'active')
                                                <span class="badge bg-success">Active</span>
                                            @else
                                                <span class="badge bg-secondary">Inactive</span>
                                            @endif
                                        </td>
                                        <td align="center">
                                            <button type="button" class="btn btn-circle btn-sm btn-blue" title="Edit"
                                                onclick="openEditLink(
                                                    {{ json_encode($link->index_theme_link_id) }},
                                                    {{ json_encode($link->index_theme_link_title) }},
                                                    {{ json_encode($link->index_theme_link_url) }},
                                                    {{ json_encode($link->index_theme_link_description) }}
                                                )">
                                                <i class="uil uil-edit"></i>
                                            </button>
                                            <a href="{{ url('/index_theme_link_toggle/'.$link->index_theme_link_id) }}"
                                               class="btn btn-circle btn-sm {{ $link->index_theme_link_status == 'active' ? 'btn-orange' : 'btn-green' }}"
                                               title="{{ $link->index_theme_link_status == 'active' ? 'Set Inactive' : 'Set Active' }}">
                                                <i class="uil {{ $link->index_theme_link_status == 'active' ? 'uil-pause' : 'uil-play' }}"></i>
                                            </a>
                                            <a href="{{ url('/index_theme_link_delete/'.$link->index_theme_link_id) }}"
                                               class="btn btn-circle btn-sm btn-red"
                                               title="Delete"
                                               onclick="return confirm('ต้องการลบลิงก์นี้ใช่หรือไม่?');">
                                                <i class="uil uil-trash-alt"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">ยังไม่มีลิงก์ กรอกฟอร์มด้านบนแล้วกด "Add"</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Modal: เพิ่ม/แก้ไข Theme --}}
    <div class="modal fade" id="themeModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form method="POST" action="{{ url('/index_theme_edit') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <input type="hidden" name="index_theme_id" id="index_theme_id" value="">

                    <div class="modal-header">
                        <h5 class="modal-title" id="themeModalTitle">Add Theme</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">ชื่อหลัก (Title)</label>
                            <input type="text" name="index_theme_title" id="index_theme_title" class="form-control" required maxlength="255" placeholder="เช่น Consulting Center">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">ชื่อรอง (Subtitle)</label>
                            <div id="subtitleList"></div>
                            <button type="button" class="btn btn-sm btn-outline-primary rounded-pill mt-1" onclick="addSubtitleRow('')">
                                <i class="uil uil-plus"></i> Add Subtitle
                            </button>
                            <div class="form-text">เพิ่มได้หลายอัน หน้า index จะเล่น animation สลับแสดงทีละอันวนลูป</div>
                            <textarea name="index_theme_subtitle" id="index_theme_subtitle" class="d-none"></textarea>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">ภาพพื้นหลัง (Banner)</label>
                            <input type="file" name="index_theme_banner" id="index_theme_banner" class="form-control" accept=".jpg,.jpeg,.png,.webp">
                            <div class="form-text" id="index_theme_banner_hint">รองรับ .jpg .jpeg .png .webp ไม่เกิน 5MB ระบบจะปรับขนาด/ตัดภาพให้พอดีอัตโนมัติ</div>
                        </div>
                        <div id="current_banner_preview_wrap" class="mb-2" style="display:none;">
                            <label class="form-label d-block">ภาพปัจจุบัน</label>
                            <img id="current_banner_preview" src="" class="theme-thumb" alt="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('script')
<script>
    function addSubtitleRow(value) {
        var list = document.getElementById('subtitleList');
        var row = document.createElement('div');
        row.className = 'input-group mb-2 subtitle-row';

        var input = document.createElement('input');
        input.type = 'text';
        input.className = 'form-control subtitle-item-input';
        input.maxLength = 255;
        input.placeholder = 'เช่น "Your Trusted Partner in Growth"';
        input.value = value || '';

        var removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'btn btn-outline-danger';
        removeBtn.innerHTML = '<i class="uil uil-times"></i>';
        removeBtn.onclick = function () { row.remove(); };

        row.appendChild(input);
        row.appendChild(removeBtn);
        list.appendChild(row);
    }

    function resetSubtitleList(values) {
        document.getElementById('subtitleList').innerHTML = '';
        if (!values || values.length === 0) {
            values = [''];
        }
        values.forEach(function (v) { addSubtitleRow(v); });
    }

    function syncSubtitleField() {
        var values = Array.from(document.querySelectorAll('.subtitle-item-input'))
            .map(function (i) { return i.value.trim(); })
            .filter(function (v) { return v.length > 0; });
        document.getElementById('index_theme_subtitle').value = values.join('\n');
    }

    document.querySelector('#themeModal form').addEventListener('submit', syncSubtitleField);

    function openAddTheme() {
        document.getElementById('themeModalTitle').textContent = 'Add Theme';
        document.getElementById('index_theme_id').value = '';
        document.getElementById('index_theme_title').value = '';
        resetSubtitleList(['']);
        document.getElementById('index_theme_banner').value = '';
        document.getElementById('index_theme_banner').required = true;
        document.getElementById('index_theme_banner_hint').textContent = 'รองรับ .jpg .jpeg .png .webp ไม่เกิน 5MB ระบบจะปรับขนาด/ตัดภาพให้พอดีอัตโนมัติ';
        document.getElementById('current_banner_preview_wrap').style.display = 'none';
    }

    function openEditTheme(id, title, subtitle, bannerUrl) {
        document.getElementById('themeModalTitle').textContent = 'Edit Theme';
        document.getElementById('index_theme_id').value = id;
        document.getElementById('index_theme_title').value = title || '';
        resetSubtitleList(subtitle ? subtitle.split('\n') : ['']);
        document.getElementById('index_theme_banner').value = '';
        document.getElementById('index_theme_banner').required = false;
        document.getElementById('index_theme_banner_hint').textContent = 'ไม่ต้องเลือกไฟล์ใหม่หากต้องการใช้ภาพเดิม';

        if (bannerUrl) {
            document.getElementById('current_banner_preview').src = bannerUrl;
            document.getElementById('current_banner_preview_wrap').style.display = 'block';
        } else {
            document.getElementById('current_banner_preview_wrap').style.display = 'none';
        }
    }

    function resetLinkForm() {
        document.getElementById('link_id').value = '';
        document.getElementById('link_title').value = '';
        document.getElementById('link_url').value = '';
        document.getElementById('link_description').value = '';
        document.getElementById('link_image').value = '';
        document.getElementById('link_image_hint').textContent = 'ไม่บังคับ ถ้าไม่เลือกจะใช้รูป default';
        document.getElementById('linkFormSubmitBtn').innerHTML = '<i class="uil uil-plus"></i> Add';
        document.getElementById('linkFormCancelBtn').style.display = 'none';
    }

    function openEditLink(linkId, title, url, description) {
        document.getElementById('link_id').value = linkId;
        document.getElementById('link_title').value = title || '';
        document.getElementById('link_url').value = url || '';
        document.getElementById('link_description').value = description || '';
        document.getElementById('link_image').value = '';
        document.getElementById('link_image_hint').textContent = 'ไม่ต้องเลือกไฟล์ใหม่หากต้องการใช้รูปเดิม';
        document.getElementById('linkFormSubmitBtn').innerHTML = '<i class="uil uil-check"></i> Save';
        document.getElementById('linkFormCancelBtn').style.display = 'inline-block';
        document.getElementById('linkForm').scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
</script>
@endsection