@extends('admin.layouts.admin')
@section('content')

    <div class="dash-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="invoice-panel">
                        <div class="act-title d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">{{ trans('Home Layout') }}</h5>
                            <div class="btn-group">
                                <!-- Fixed Bootstrap 5 attributes -->
                                <button type="button" class="btn btn-primary v3 mr-2" data-toggle="modal"
                                    data-target="#addSectionModal">
                                    {{ trans('Add Section') }}
                                </button>
                                <button type="button" class="btn btn-primary v3 mr-2" data-bs-toggle="modal"
                                    data-bs-target="#previewSectionModal">
                                    {{ trans('Preview Section') }}
                                </button>
                                <a href="{{ route('home-layouts.publish') }}"
                                    class="btn btn-success v3">{{ 'Publish' }}</a>
                            </div>
                        </div>

                        <style>
                            .btn.v3 {
                                margin-left: 4px;
                            }
                        </style>

                        <div class="invoice-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th class="col-2"></th>
                                            <th class="col-6">{{ trans('Example Demo') }}</th>
                                            <th class="col-4">{{ trans('Category / Widgets') }}</th>
                                            <th class="col-3">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="sortable">
                                        @forelse ($layouts as $info)
                                            <tr data-id="{{ $info->id }}">
                                                <td class="text-end">
                                                    <a class="btn btn-secondary" type="button" data-toggle="collapse"
                                                        href="#btnGroupCollapse{{ $info->id }}"
                                                        aria-expanded="false"
                                                        aria-controls="btnGroupCollapse{{ $info->id }}">
                                                        <i class="fas fa-bars"></i>
                                                    </a>
                                                </td>
                                                <td>
                                                    <!-- Collapsible Button Group -->
                                                    <div class="collapse mt-2" id="btnGroupCollapse{{ $info->id }}">
                                                        <div class="btn-group" role="group">
                                                            <!-- Ads Modal Trigger -->
                                                            <button type="button" class="btn btn-info"
                                                                data-toggle="modal"
                                                                data-target="#adsModal{{ $info->id }}">
                                                                ADS
                                                            </button>

                                                            <!-- Ads Modal -->
                                                            <div class="modal fade" id="adsModal{{ $info->id }}"
                                                                tabindex="-1" aria-labelledby="adsModalLabel"
                                                                aria-hidden="true">
                                                                <div class="modal-dialog">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="adsModalLabel">ADS
                                                                                Details</h5>
                                                                            <button type="button" class="btn-close"
                                                                                data-bs-dismiss="modal"
                                                                                aria-label="Close"></button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <form
                                                                                action="{{ route('home-layouts-ads', $info->id) }}"
                                                                                method="post"
                                                                                enctype="multipart/form-data">
                                                                                @csrf
                                                                                <div class="row">
                                                                                    <div class="form-group col-md-6">
                                                                                        <label>{{ __('AD Type') }}</label>
                                                                                        <select name="ads[ad_type]"
                                                                                            class="form-control">
                                                                                            <option value="0"
                                                                                                {{ old('ads.ad_type', $info->ads['ad_type'] ?? 0) == 0 ? 'selected' : '' }}>
                                                                                                {{ __('Disabled') }}
                                                                                            </option>
                                                                                            <option value="1"
                                                                                                {{ old('ads.ad_type', $info->ads['ad_type'] ?? '') == 1 ? 'selected' : '' }}>
                                                                                                {{ __('Active Image') }}
                                                                                            </option>
                                                                                            <option value="2"
                                                                                                {{ old('ads.ad_type', $info->ads['ad_type'] ?? '') == 2 ? 'selected' : '' }}>
                                                                                                {{ __('Active Ad Code') }}
                                                                                            </option>
                                                                                        </select>
                                                                                    </div>
                                                                                    <div class="form-group col-md-6">
                                                                                        <label>{{ __('Ads Title') }}</label>
                                                                                        <input type="text"
                                                                                            name="ads[title]"
                                                                                            class="form-control"
                                                                                            value="{{ old('ads.title', $info->ads['title'] ?? '') }}"
                                                                                            required>
                                                                                    </div>
                                                                                    <div class="col-md-12 banner_image">
                                                                                        <div class="form-row">
                                                                                            <div
                                                                                                class="form-group col-md-6">
                                                                                                <label>{{ __('Link') }}</label>
                                                                                                <input type="text"
                                                                                                    name="ads[link]"
                                                                                                    class="form-control"
                                                                                                    value="{{ old('ads.link', $info->ads['link'] ?? '') }}">
                                                                                            </div>
                                                                                            <div
                                                                                                class="form-group col-md-6">
                                                                                                <label>{{ __('Image') }}</label>
                                                                                                <input type="file"
                                                                                                    name="ads[image]"
                                                                                                    class="form-control">
                                                                                                @if (!empty($info->ads['image']))
                                                                                                    <img src="{{ asset($info->ads['image']) }}"
                                                                                                        alt="Ad Image"
                                                                                                        class="mt-2"
                                                                                                        style="max-height:80px;">
                                                                                                @endif
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-md-12 border-left">
                                                                                        <div
                                                                                            class="form-group col-md-12 ads_code">
                                                                                            <label>{{ __('AD Code') }}</label>
                                                                                            <textarea name="ads[ad_code]" class="form-control" rows="8">{{ old('ads.ad_code', $info->ads['ad_code'] ?? '') }}</textarea>
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <label>{{ __('Show From') }}</label>
                                                                                            <input type="datetime-local"
                                                                                                name="ads[show_from]"
                                                                                                class="form-control"
                                                                                                value="{{ old('ads.show_from', !empty($info->ads['show_from']) ? \Carbon\Carbon::parse($info->ads['show_from'])->format('Y-m-d\TH:i') : '') }}">
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <label>{{ __('Show Till') }}</label>
                                                                                            <input type="datetime-local"
                                                                                                name="ads[show_till]"
                                                                                                class="form-control"
                                                                                                value="{{ old('ads.show_till', !empty($info->ads['show_till']) ? \Carbon\Carbon::parse($info->ads['show_till'])->format('Y-m-d\TH:i') : '') }}">
                                                                                        </div>
                                                                                        <div class="form-check mb-2">
                                                                                            <input type="checkbox"
                                                                                                name="ads[date_active]"
                                                                                                id="settings_date_active"
                                                                                                class="form-check-input"
                                                                                                {{ old('ads.date_active', $info->ads['date_active'] ?? false) ? 'checked' : '' }}>
                                                                                            <label class="form-check-label"
                                                                                                for="settings_date_active">{{ __('Date Active') }}</label>
                                                                                        </div>
                                                                                        <div class="form-check mb-2">
                                                                                            <input type="checkbox"
                                                                                                name="ads[is_active]"
                                                                                                id="settings_is_active"
                                                                                                class="form-check-input"
                                                                                                {{ old('ads.is_active', $info->ads['is_active'] ?? true) ? 'checked' : '' }}>
                                                                                            <label class="form-check-label"
                                                                                                for="settings_is_active">{{ __('Active') }}</label>
                                                                                        </div>
                                                                                        <div
                                                                                            class="form-group text-end mt-3">
                                                                                            <button type="submit"
                                                                                                class="btn btn-primary w-100">
                                                                                                {{ isset($info->ads) ? __('Update Advert') : __('Add Advert') }}
                                                                                            </button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </form>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <button type="button" class="btn btn-primary">Ads
                                                                View</button>
                                                        </div>
                                                    </div>
                                                    <img src="{{ asset($info->section->image) }}" width="500px"
                                                        style="border: 2px solid gainsboro;" alt="{{ $info->title }}">
                                                </td>
                                                <td>
                                                    <form action="{{ route('home-layouts.update', $info->id) }}"
                                                        method="POST">
                                                        @csrf
                                                        @method('PUT')
                                                        <input type="hidden" name="section_id"
                                                            value="{{ $info->section_id }}">
                                                        <div class="row">
                                                            <div class="col-md-5">
                                                                @php
                                                                    $cat_settings = json_decode(
                                                                        $info->section->settings,
                                                                    );
                                                                    $totalCats = $cat_settings->total_category ?? 0;
                                                                @endphp
                                                                @for ($i = 0; $i < $totalCats; $i++)
                                                                    @php
                                                                        $selectedCat =
                                                                            $info->categories[$i]->id ?? null;
                                                                    @endphp
                                                                    <select name="settings[category][]"
                                                                        class="form-control mb-1">
                                                                        <option value=""
                                                                            {{ is_null($selectedCat) ? 'selected' : '' }}>
                                                                            Select Category ({{ $i + 1 }})
                                                                        </option>
                                                                        @foreach ($categories as $category)
                                                                            <option value="{{ $category->id }}"
                                                                                {{ $category->id == $selectedCat ? 'selected' : '' }}>
                                                                                {{ $category->name }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                @endfor
                                                            </div>
                                                            <div class="col-md-7">
                                                                @php
                                                                    $totalWidgets = $cat_settings->total_widgets ?? 0;
                                                                @endphp
                                                                @for ($i = 0; $i < $totalWidgets; $i++)
                                                                    @php
                                                                        $selectedWidget =
                                                                            $info->widgets[$i]->id ?? null;
                                                                    @endphp
                                                                    <select name="settings[widgets][]"
                                                                        class="form-control mb-1">
                                                                        <option value=""
                                                                            {{ is_null($selectedWidget) ? 'selected' : '' }}>
                                                                            Widgets ({{ $i + 1 }})
                                                                        </option>
                                                                        @foreach ($widgets as $widget)
                                                                            <option value="{{ $widget->id }}"
                                                                                {{ $widget->id == $selectedWidget ? 'selected' : '' }}>
                                                                                {{ $widget->title }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                @endfor
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-12">
                                                                <div class="form-check form-switch mb-2">
                                                                    <input type="checkbox" class="form-check-input"
                                                                        name="status"
                                                                        id="customSwitch{{ $info->id }}"
                                                                        {{ $info->status ? 'checked' : '' }}>
                                                                    <label class="form-check-label"
                                                                        for="customSwitch{{ $info->id }}">
                                                                        {{ $info->status ? 'ON' : 'OFF' }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12">
                                                                @if ($cat_settings->is_lead_news ?? false)
                                                                    <input type="checkbox" checked>
                                                                    <label>Lead News</label>
                                                                @endif
                                                                @if ($cat_settings->is_main_news ?? false)
                                                                    <input type="checkbox" checked>
                                                                    <label>Main News</label>
                                                                @endif

                                                                @if ($cat_settings->is_header ?? false)
                                                                    <input type="checkbox" checked>
                                                                    <label>Header</label>
                                                                @endif

                                                                @if ($cat_settings->is_footer ?? false)
                                                                    <input type="checkbox" checked>
                                                                    <label>Footer</label>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <button type="submit" class="btn btn-info w-100">
                                                            {{ trans('Update Section') }}
                                                        </button>
                                                    </form>
                                                </td>
                                                <td>
                                                    <button class="btn btn-danger btn-sm delete-layout"
                                                        data-id="{{ $info->id }}">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4">{{ trans('No Layouts Found') }}</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Add Section Modal --}}
        <div class="modal fade" id="addSectionModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ trans('Add New Section') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="invoice-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th class="col-7">{{ trans('Example Demo') }}</th>
                                            <th class="col-5">{{ trans('Category / Widgets') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($sections as $info)
                                            @php $settings = json_decode($info->settings); @endphp
                                            <tr style="border-bottom: 3px solid cadetblue">
                                                <td><img src="{{ asset($info->image) }}" alt="{{ $info->title }}"></td>
                                                <td>
                                                    <form action="{{ route('home-layouts.store') }}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="section_id"
                                                            value="{{ $info->id }}">
                                                        <div class="row">
                                                            <div class="col-md-5">
                                                                @for ($i = 0; $i < ($settings->total_category ?? 0); $i++)
                                                                    <select name="settings[category][]"
                                                                        class="form-control mb-1">
                                                                        <option value="" selected>Select Category
                                                                        </option>
                                                                        @foreach ($categories as $cat)
                                                                            <option value="{{ $cat->id }}">
                                                                                {{ $cat->name }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                @endfor
                                                            </div>
                                                            <div class="col-md-7">
                                                                @for ($i = 0; $i < ($settings->total_widgets ?? 0); $i++)
                                                                    <select name="settings[widgets][]"
                                                                        class="form-control mb-1">
                                                                        <option value="" selected>Widgets</option>
                                                                        @foreach (widgets() as $widget)
                                                                            <option value="{{ $widget->id }}">
                                                                                {{ $widget->title }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                @endfor
                                                            </div>
                                                            <div class="col-md-6 mt-2">
                                                                @if ($settings->is_lead_news ?? false)
                                                                    <input type="checkbox" checked
                                                                        name="settings[is_lead_news]" value="true">
                                                                    <label>Is Lead News</label>
                                                                @endif
                                                                @if ($settings->is_main_news ?? false)
                                                                    <input type="checkbox" checked
                                                                        name="settings[is_main_news]" value="true">
                                                                    <label>Is Main News</label>
                                                                @endif
                                                            </div>
                                                            <div class="col-md-6 mt-2">
                                                                <input type="checkbox" checked name="status"
                                                                    value="true">
                                                                <label>Status</label>
                                                            </div>
                                                        </div>
                                                        <button type="submit"
                                                            class="btn btn-primary w-100">{{ trans('Add Section') }}</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="2">{{ trans('No Sections Found') }}</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Preview Modal --}}
        <div class="modal fade" id="previewSectionModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-fullscreen-custom">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ trans('Preview Layout') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0" style="height: 90vh;">
                        <iframe src="{{ route('layouts.preview') }}" width="100%" height="100%"
                            frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            const el = document.getElementById('sortable');
            Sortable.create(el, {
                animation: 150,
                onEnd: function() {
                    let order = [];
                    $('#sortable tr').each(function(index) {
                        order.push({
                            id: $(this).data('id'),
                            unpublish_position: index + 1
                        });
                    });
                    $.ajax({
                        type: "POST",
                        url: "{{ route('layouts.shorting') }}",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        contentType: 'application/json',
                        data: JSON.stringify({
                            order: order
                        }),
                        success: function(response) {
                            console.log(response.success);
                        },
                        error: function() {
                            console.error("Something went wrong.");
                        }
                    });
                }
            });

            $(document).on("click", ".delete-layout", function(e) {
                e.preventDefault();
                let id = $(this).data("id");
                if (confirm("Are you sure you want to delete this section?")) {
                    $.ajax({
                        url: "{{ route('home-layouts.destroy', ':id') }}".replace(':id', id),
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            _method: "DELETE"
                        },
                        success: function() {
                            alert("Section deleted successfully!");
                            $(`tr[data-id='${id}']`).remove();
                        },
                        error: function() {
                            alert("Error! Something went wrong.");
                        }
                    });
                }
            });
        });
    </script>
@endsection