@extends('admin.layouts.app')
@section('panel')

    <div class="row mb-3">
        <div class="col-lg-12">
            <div class="card b-radius--10">
                <div class="card-body">
                    <h6 class="mb-3">@lang('Layout Validation')</h6>
                    <div class="d-flex flex-wrap gap-2">
                        @forelse($rowTotals as $row)
                            @php
                                $desktopComplete = (int) $row->desktop_total === 100;
                                $mobileComplete = (int) $row->mobile_total === 100;
                            @endphp
                            <div class="badge {{ $desktopComplete && $mobileComplete ? 'badge--success' : 'badge--warning' }} px-3 py-2">
                                Row {{ $row->layout_row }} · Desktop {{ (int) $row->desktop_total }}% · Mobile {{ (int) $row->mobile_total }}%
                            </div>
                        @empty
                            <span class="text-muted">@lang('No rows yet')</span>
                        @endforelse
                    </div>
                    <small class="text-muted d-block mt-2">@lang('Target: each row should be exactly 100% for desktop and mobile active types.')</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-lg-12">
            <div class="card b-radius--10">
                <div class="card-body">
                    <form id="presetForm" class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label for="preset_row" class="font-weight-bold">@lang('Target Row')</label>
                            <input type="number" min="1" class="form-control" id="preset_row" value="1" required>
                        </div>
                        <div class="col-md-5">
                            <label for="preset_name" class="font-weight-bold">@lang('Preset Layout')</label>
                            <select id="preset_name" class="form-control" required>
                                <option value="">@lang('Select preset')</option>
                                <option value="70-30">70 / 30</option>
                                <option value="50-25-25">50 / 25 / 25</option>
                                <option value="40-30-30">40 / 30 / 30</option>
                            </select>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <button type="submit" class="btn btn--primary w-100 w-md-auto">@lang('Apply Preset')</button>
                        </div>
                    </form>
                    <small class="text-muted d-block mt-2">@lang('Preset applies to active types in the selected row. The row must contain exactly the same number of active types as the preset.') </small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card b-radius--10 ">
                <div class="card-body p-0">
                    <div class="table-responsive--sm table-responsive">
                        <table class="table table--light style--two custom-data-table" id="typesTable">
                            <thead>
                            <tr>
                                <th>@lang('Sort')</th>
                                <th>@lang('Title')</th>
                                <th>@lang('Status')</th>
                                <th>@lang('Row')</th>
                                <th>@lang('Priority')</th>
                                <th>@lang('Desktop Width')</th>
                                <th>@lang('Mobile Width')</th>
                                <th>@lang('Columns')</th>
                                <th>@lang('Created At')</th>
                                <th>@lang('Action')</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($homepage as $type)
                                <tr data-id="{{ $type->id }}">
                                    <td><i class="las la-grip-vertical" style="cursor: move;"></i></td>
                                    <td>{{ $type->title }}</td>
                                    <td>{{ $type->status == 1 ? 'Active' : 'InActive' }}</td>
                                    <td>{{ $type->layout_row ?? 1 }}</td>
                                    <td>{{ $type->priority ?? 0 }}</td>
                                    <td>{{ $type->width_percent ?? 100 }}%</td>
                                    <td>{{ $type->mobile_width_percent ?? 100 }}%</td>
                                    <td>{{ $type->columns_count ?? 1 }}</td>
                                    <td>{{ showDateTime($type->created_at) }}</td>
                                    <td>
                                        <a href="{{ route('admin.homepage.types.edit', $type->id) }}" class="btn btn-sm btn--primary"><i class="las la-edit"></i></a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @if ($homepage->hasPages())
                    <div class="card-footer py-4">
                        {{ paginateLinks($homepage) }}
                    </div>
                @endif
            </div>
        </div>
    </div>


@endsection
@push('breadcrumb-plugins')
    <a href="{{ route('admin.homepage.types.create') }}" class="btn btn-sm btn--primary "><i class="las la-plus"></i>@lang('Add New')</a>
@endpush

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        (function () {
            const tableBody = document.querySelector('#typesTable tbody');
            if (tableBody) {
                new Sortable(tableBody, {
                    animation: 150,
                    handle: '.la-grip-vertical',
                    onEnd: function () {
                        const order = Array.from(tableBody.querySelectorAll('tr[data-id]')).map((tr) => tr.dataset.id);
                        fetch("{{ route('admin.homepage.types.update-order') }}", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ order: order })
                        })
                        .then((response) => response.json())
                        .then((data) => {
                            if (data.status !== 'success') {
                                alert(data.message || 'Error saving type order');
                            }
                        })
                        .catch(() => alert('Error connecting to server'));
                    }
                });
            }

            const presetForm = document.getElementById('presetForm');
            if (presetForm) {
                presetForm.addEventListener('submit', function (event) {
                    event.preventDefault();

                    const row = document.getElementById('preset_row').value;
                    const preset = document.getElementById('preset_name').value;

                    fetch("{{ route('admin.homepage.types.apply-preset') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            layout_row: row,
                            preset: preset,
                        })
                    })
                    .then(async (response) => {
                        const data = await response.json();
                        if (!response.ok || data.status !== 'success') {
                            throw new Error(data.message || 'Could not apply preset');
                        }
                        window.location.reload();
                    })
                    .catch((error) => {
                        alert(error.message || 'Could not apply preset');
                    });
                });
            }
        })();
    </script>
@endpush