@extends('admin.settings.layout')

@section('settings-content')
<div class="row g-4">
    <!-- Shop Page Slider Settings -->
    <div class="col-md-12">
        <div class="card border-0 shadow-sm mb-2">
            <div class="card-header bg-white py-3">
                <h5 class="fw-bold mb-0">Shop Page Slider Settings</h5>
                <p class="text-muted small mb-0">Control the image slider shown on <code>/shop</code> page.</p>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.settings.update', 'sliders') }}" method="POST" class="row g-3 align-items-end">
                    @csrf
                    <div class="col-md-4">
                        <div class="form-check form-switch p-3 border rounded bg-light h-100">
                            <input type="hidden" name="show_shop_slider" value="0">
                            <input class="form-check-input" type="checkbox" name="show_shop_slider" id="show_shop_slider" value="1" {{ setting_checked('show_shop_slider', true) }}>
                            <label class="form-check-label fw-bold" for="show_shop_slider">Show Shop Slider</label>
                            <small class="d-block text-muted">Enable/disable slider on shop page</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Autoplay Delay (ms)</label>
                        <input type="number" name="shop_slider_autoplay" class="form-control" min="2000" max="15000" step="500" value="{{ \App\Models\Setting::get('shop_slider_autoplay', 4500, 'sliders') }}">
                        <small class="text-muted">Time between slides (2000–15000)</small>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary w-100 fw-bold">Save Shop Settings</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Shop Page Sliders -->
    <div class="col-md-12">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="fw-bold mb-0">Shop Page Sliders</h5>
                    <small class="text-muted">Displayed on /shop — upload, edit &amp; reorder here</small>
                </div>
                <button class="btn btn-success btn-sm add-slider-trigger" data-page="shop" data-bs-toggle="modal" data-bs-target="#addSliderModal">
                    <i class="bi bi-plus-lg me-1"></i> Add Shop Slide
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Preview</th>
                            <th>Info</th>
                            <th>Priority</th>
                            <th>Status</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($shopSliders as $slider)
                        <tr>
                            <td class="ps-4">
                                <img src="{{ $slider->getImageUrl() }}" class="rounded shadow-sm" style="width: 120px; height: 60px; object-fit: cover;">
                            </td>
                            <td>
                                <div class="fw-bold">{{ $slider->title ?? 'No Title' }}</div>
                                <small class="text-muted d-block">{{ $slider->subtitle }}</small>
                                <small class="text-primary">{{ $slider->link_url }}</small>
                            </td>
                            <td>{{ $slider->order_priority }}</td>
                            <td>
                                <span class="badge bg-{{ $slider->status ? 'success' : 'secondary' }}">
                                    {{ $slider->status ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="text-end pe-4">
                                <div class="d-flex justify-content-end gap-2">
                                    <button class="btn btn-sm btn-outline-primary edit-slider-btn"
                                        data-id="{{ $slider->id }}"
                                        data-page="{{ $slider->page ?? 'shop' }}"
                                        data-title="{{ $slider->title }}"
                                        data-subtitle="{{ $slider->subtitle }}"
                                        data-link="{{ $slider->link_url }}"
                                        data-priority="{{ $slider->order_priority }}"
                                        data-status="{{ $slider->status }}"
                                        data-image="{{ $slider->getImageUrl() }}"
                                        data-bs-toggle="modal" data-bs-target="#editSliderModal">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form action="{{ route('admin.settings.sliders.destroy', $slider->id) }}" method="POST" onsubmit="return confirm('Delete this slider?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <p class="text-muted mb-2">No shop sliders yet.</p>
                                <button class="btn btn-sm btn-outline-success add-slider-trigger" data-page="shop" data-bs-toggle="modal" data-bs-target="#addSliderModal">Upload first slide</button>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Homepage Sliders -->
    <div class="col-md-12">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Homepage Sliders</h5>
                <button class="btn btn-primary btn-sm add-slider-trigger" data-page="home" data-bs-toggle="modal" data-bs-target="#addSliderModal">
                    <i class="bi bi-plus-lg me-1"></i> Add Home Slide
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Preview</th>
                            <th>Info</th>
                            <th>Priority</th>
                            <th>Status</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($homeSliders as $slider)
                        <tr>
                            <td class="ps-4">
                                <img src="{{ $slider->getImageUrl() }}" class="rounded shadow-sm" style="width: 120px; height: 60px; object-fit: cover;">
                            </td>
                            <td>
                                <div class="fw-bold">{{ $slider->title ?? 'No Title' }}</div>
                                <small class="text-muted d-block">{{ $slider->subtitle }}</small>
                                <small class="text-primary">{{ $slider->link_url }}</small>
                            </td>
                            <td>{{ $slider->order_priority }}</td>
                            <td>
                                <span class="badge bg-{{ $slider->status ? 'success' : 'secondary' }}">
                                    {{ $slider->status ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="text-end pe-4">
                                <div class="d-flex justify-content-end gap-2">
                                    <button class="btn btn-sm btn-outline-primary edit-slider-btn" 
                                        data-id="{{ $slider->id }}"
                                        data-page="{{ $slider->page ?? 'home' }}"
                                        data-title="{{ $slider->title }}"
                                        data-subtitle="{{ $slider->subtitle }}"
                                        data-link="{{ $slider->link_url }}"
                                        data-priority="{{ $slider->order_priority }}"
                                        data-status="{{ $slider->status }}"
                                        data-image="{{ $slider->getImageUrl() }}"
                                        data-bs-toggle="modal" data-bs-target="#editSliderModal">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form action="{{ route('admin.settings.sliders.destroy', $slider->id) }}" method="POST" onsubmit="return confirm('Delete this slider?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <p class="text-muted">No sliders found.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Banners Management -->
    <div class="col-md-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Promotional Banners</h5>
                <button class="btn btn-dark btn-sm" data-bs-toggle="modal" data-bs-target="#addBannerModal">
                    <i class="bi bi-plus-lg me-1"></i> Add Banner
                </button>
            </div>
            <div class="card-body p-0">
                 <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Preview</th>
                            <th>Title / Link</th>
                            <th>Position</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($banners as $banner)
                        <tr>
                            <td class="ps-4">
                                <img src="{{ $banner->getImageUrl() }}" class="rounded border shadow-sm" style="width: 100px; height: 100px; object-fit: cover;">
                            </td>
                            <td>
                                <div class="fw-bold">{{ $banner->title ?? 'Untitled Banner' }}</div>
                                <small class="text-muted">{{ $banner->link_url }}</small>
                            </td>
                            <td><span class="badge bg-info text-dark border">{{ strtoupper($banner->position) }}</span></td>
                            <td class="text-end pe-4">
                                <form action="{{ route('admin.settings.banners.destroy', $banner->id) }}" method="POST" onsubmit="return confirm('Delete this banner?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center py-5 text-muted">No banners found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                 </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Slider Modal -->
<div class="modal fade" id="addSliderModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.settings.sliders.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="page" id="slider_page" value="home">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="addSliderModalTitle">Add New Slider</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 fw-bold">Title</label>
                        <input type="text" name="title" id="slider_title" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Subtitle</label>
                        <input type="text" name="subtitle" id="slider_subtitle" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Target Link URL</label>
                        <input type="text" name="link_url" id="slider_link" class="form-control" placeholder="https://...">
                    </div>
                    <div class="mb-3 text-center">
                        <img id="add_slider_preview" src="" class="rounded shadow-sm mb-2 d-none" style="max-height: 100px; max-width: 100%;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Slider Image (Large)</label>
                        <input type="file" name="image_path" id="slider_image" class="form-control" required accept="image/*">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Order Priority</label>
                            <input type="number" name="order_priority" id="slider_priority" class="form-control" value="0">
                        </div>
                        <div class="col-md-6 mb-3">
                             <label class="form-label fw-bold">Status</label>
                             <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="status" id="slider_status" value="1" checked>
                                <label class="form-check-label">Visible</label>
                             </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="submit" class="btn btn-primary w-100 fw-bold">Upload & Create</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Edit Slider Modal -->
<div class="modal fade" id="editSliderModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="" method="POST" enctype="multipart/form-data" id="editSliderForm">
            @csrf @method('PUT')
            <input type="hidden" name="page" id="edit_slider_page" value="home">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="editSliderModalTitle">Edit Slider</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 text-center">
                        <img id="edit_slider_preview" src="" class="rounded shadow-sm mb-2" style="max-height: 100px; max-width: 100%;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Title</label>
                        <input type="text" name="title" id="edit_slider_title" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Subtitle</label>
                        <input type="text" name="subtitle" id="edit_slider_subtitle" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Target Link URL</label>
                        <input type="text" name="link_url" id="edit_slider_link" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Change Image (Optional)</label>
                        <input type="file" name="image_path" class="form-control" accept="image/*">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Order Priority</label>
                            <input type="number" name="order_priority" id="edit_slider_priority" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                             <label class="form-label fw-bold">Status</label>
                             <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="status" id="edit_slider_status" value="1">
                                <label class="form-check-label">Visible</label>
                             </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="submit" class="btn btn-primary w-100 fw-bold">Update Slider</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Add Banner Modal -->
<div class="modal fade" id="addBannerModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.settings.banners.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold">Add New Banner</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 fw-bold">Banner Title (Internal)</label>
                        <input type="text" name="title" id="banner_title" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Target Link URL</label>
                        <input type="text" name="link_url" id="banner_link" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Position / Zone</label>
                        <select name="position" id="banner_position" class="form-select">
                            <option value="home_top">Home Top (Small)</option>
                            <option value="home_middle">Home Middle (Wide)</option>
                            <option value="sidebar">Sidebar Promo</option>
                            <option value="footer">Footer Area</option>
                        </select>
                    </div>
                    <div class="mb-3 text-center">
                        <img id="add_banner_preview" src="" class="rounded shadow-sm mb-2 d-none" style="max-height: 100px; max-width: 100%;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Banner Image</label>
                        <input type="file" name="image_path" id="banner_image" class="form-control" required accept="image/*">
                    </div>
                     <div class="mb-3">
                         <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="status" id="banner_status" value="1" checked>
                            <label class="form-check-label fw-bold">Publish Immediately</label>
                         </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="submit" class="btn btn-dark w-100 fw-bold">Create Banner</button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.add-slider-trigger').forEach(btn => {
            btn.addEventListener('click', function() {
                const page = this.getAttribute('data-page') || 'home';
                document.getElementById('slider_page').value = page;
                const titleEl = document.getElementById('addSliderModalTitle');
                if (titleEl) {
                    titleEl.textContent = page === 'shop' ? 'Add Shop Page Slide' : 'Add Homepage Slide';
                }
            });
        });

        const editButtons = document.querySelectorAll('.edit-slider-btn');
        editButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                const page = this.getAttribute('data-page') || 'home';
                const title = this.getAttribute('data-title');
                const subtitle = this.getAttribute('data-subtitle');
                const link = this.getAttribute('data-link');
                const priority = this.getAttribute('data-priority');
                const status = this.getAttribute('data-status');
                const image = this.getAttribute('data-image');

                document.getElementById('edit_slider_page').value = page;
                document.getElementById('edit_slider_title').value = title;
                document.getElementById('edit_slider_subtitle').value = subtitle;
                document.getElementById('edit_slider_link').value = link;
                document.getElementById('edit_slider_priority').value = priority;
                document.getElementById('edit_slider_status').checked = status == "1";
                document.getElementById('edit_slider_preview').src = image;

                const editTitleEl = document.getElementById('editSliderModalTitle');
                if (editTitleEl) {
                    editTitleEl.textContent = page === 'shop' ? 'Edit Shop Slide' : 'Edit Homepage Slide';
                }

                const form = document.getElementById('editSliderForm');
                form.action = "{{ route('admin.settings.sliders.update', ':id') }}".replace(':id', id);
            });
        });

        // Image Preview logic
        function handleImagePreview(input, previewId) {
            input.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const preview = document.getElementById(previewId);
                        if (preview) {
                            preview.src = e.target.result;
                            preview.classList.remove('d-none');
                        }
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        }

        const editSliderInput = document.querySelector('#editSliderModal input[type="file"]');
        handleImagePreview(editSliderInput, 'edit_slider_preview');

        const addSliderInput = document.getElementById('slider_image');
        handleImagePreview(addSliderInput, 'add_slider_preview');

        const addBannerInput = document.getElementById('banner_image');
        handleImagePreview(addBannerInput, 'add_banner_preview');
    });
</script>
@endpush
@endsection