@extends('layouts.backend.master')
@section('admin')

    {{-- Font Awesome 4 --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    {{-- Summernote (Bootstrap 3 build) --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.js"></script>



    <style>
        /* Make Summernote toolbar readable inside modal */
        .note-editor.note-frame { border: 1px solid #ddd; border-radius: 4px; }
        .note-toolbar { background: #f8f8f8 !important; }

        /* Icon picker */
        .icon-picker-trigger:hover { background: #f0f0f0; }
        .icon-item {
            width:36px; height:36px; display:flex; align-items:center; justify-content:center;
            border:1px solid #eee; border-radius:4px; cursor:pointer; font-size:16px; color:#444;
            transition: background .15s, border-color .15s;
        }
        .icon-item:hover, .icon-item.active { background:#e91e8c; color:#fff; border-color:#c0166e; }
    </style>

    <div class="content">

        <div class="content-header">
            <div class="leftside-content-header">
                <ul class="breadcrumbs">
                    <li><i class="fa fa-table"></i><a href="#">{{ $dashboard }}</a></li>
                    <li><a>{{ $subTitle }}</a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">

                {{-- ── Add modal (empty $data) ──────────────────────────────── --}}

                @include('backend.modal.project')

                <div class="panel">
                    <div class="panel b-primary bt-md">
                        <div class="panel-content p-none">
                            <div class="widget-list list-to-do">
                                <h4 class="list-title">{{ $subTitle }}</h4>
                                <button class="add-item btn btn-o btn-primary btn-xs"
                                        data-toggle="modal" data-target="#addRowModal">
                                    {{ $title }} <i class="fa fa-plus" style="padding-left:10px"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="panel-content">
                        <div class="table-responsive">
                            <table id="basic-table"
                                   class="data-table table table-striped nowrap table-hover"
                                   cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>Sl:</th>
                                    <th>Image</th>
                                    <th>Title</th>
                                    <th>category</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($dataList as $data)
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>

                                        <td>
                                            @if($data->image)
                                                @php $img = json_decode($data->image); @endphp
                                                <picture>
                                                    <source media="(max-width:480px)" srcset="{{ asset($img->small) }}">
                                                    <source media="(max-width:991px)" srcset="{{ asset($img->medium) }}">
                                                    <source media="(min-width:992px)" srcset="{{ asset($img->large) }}">
                                                    <img src="{{ asset($img->original) }}" width="70">
                                                </picture>
                                            @endif
                                        </td>

                                        <td>{{ $data->title }}</td>

                                        <td>{{ $data->title }}</td>

                                        <td>{{ $data->status }}</td>

                                        <td style="display:flex;gap:10px;">
                                            <a href="#" data-toggle="modal"
                                               data-target="#editRowModal{{ $data->id }}"
                                               class="btn btn-warning btn-sm">Edit</a>

                                            <form action="{{ route('admin.product.delete', $data->id) }}"
                                                  method="POST" class="d-inline">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm"
                                                        onclick="return confirm('Delete this record?')">Delete</button>
                                            </form>
                                        </td>
                                    </tr>

                                    {{-- Edit modal for this row --}}
                                    @include('backend.modal.project')
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

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

    <script>
        // ════════════════════════════════════════════════════════════
        //  IMAGE PREVIEW
        // ════════════════════════════════════════════════════════════
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
                input.addEventListener('change', function (e) {
                    var file = e.target.files[0];
                    if (!file || !file.type.startsWith('image/')) return;
                    var reader = new FileReader();
                    reader.onload = function (ev) {
                        document.getElementById(input.dataset.preview).src = ev.target.result;
                        document.getElementById(input.dataset.previewWrap).style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                });
            });
        });


    </script>
    <script>
        $(document).ready(function() {
            // For both add and edit modals, load subcategories when category changes
            $(document).on('change', '.category-select', function() {
                var $modal = $(this).closest('.modal');
                var categoryId = $(this).val();
                var $subSelect = $modal.find('.subcategory-select');
                var currentSubId = $subSelect.data('current-sub-id');

                if (categoryId) {
                    $.ajax({
                        url: '/get-subcategories/' + categoryId,
                        type: 'GET',
                        success: function(data) {
                            var options = '<option value="">Select Sub Category</option>';
                            $.each(data, function(i, item) {
                                var selected = (currentSubId == item.id) ? 'selected' : '';
                                options += `<option value="${item.id}" ${selected}>${item.title}</option>`;
                            });
                            $subSelect.html(options);
                        }
                    });
                } else {
                    $subSelect.html('<option value="">Select Sub Category</option>');
                }
            });

            // On modal open, trigger change event to load subcategories for the preselected category
            $('.modal').on('shown.bs.modal', function() {
                $(this).find('.category-select').trigger('change');
            });
        });
    </script>
@endsection