@php
    $templates = [];
    $templatesPagination = [];
    $haveTemplatePerm ??= false;

    $selectedTemplateId = request()->query('template_id');
    if (!$selectedTemplateId) {
        $selectedTemplateId = session()->get('template_id');
    }

    if ($haveTemplatePerm && request()->segment(2) == 'create' && request()->segment(3) == 'sale-info') {
        $response = App\Http\Controllers\Web\Account\ListingDefaultsController::userSalesTemplates(request());
        if ($response['success']) {
            $templates = $response['result'];
            $templatesPagination = $response['pagination'];
        }
    }

    $selectedCatId = session()->get('postInput.category_id');
@endphp

@if ($templates && $templatesPagination['total'] > 0)
    <div class="w-100 d-flex justify-content-between">
        <h5>Saved Templates</h5>
        <a href="/account/listing-defaults" target="_blank">Manage</a>
    </div>
    <div class="d-flex flex-column gap-1">
        @foreach ($templates as $key => $template)
            @php
                $isActive = $selectedTemplateId == $template->id;
                $borderColor = '#4e73df';
            @endphp

            <div class="card shadow-sm p-3 rounded-3 select-template transition-base overflow-hidden position-relative {{ $isActive ? 'bg-light-primary active' : 'bg-white' }}"
                data-template-id="{{ $template->id }}" role="{{ $isActive ? '' : 'button' }}"
                style="{{ $isActive ? "border: 1px solid $borderColor !important; border-left: 0px !important;" : 'border: 1px solid #e3e6f0;' }}">
                <div class="position-absolute top-0 bottom-0 start-0 {{ $isActive ? 'bg-primary' : 'bg-transparent' }}"
                    style="width: 5px;"></div>

                <div class="d-flex align-items-center justify-content-between ps-2">
                    <div class="d-flex flex-column" style="max-width: 85%;">
                        <div class="d-flex align-items-center">
                            <span class="fw-bold {{ $isActive ? 'text-primary' : 'text-dark' }}">
                                {{ $template->name }}
                            </span>
                        </div>
                        @if (!empty($template->description))
                            <small class="text-muted mt-1 text-truncate">
                                {{ $template->description }}
                            </small>
                        @endif
                    </div>

                    <div class="text-end" style="width: 24px;">
                        @if ($isActive)
                            <button type="submit"
                                style="background: none;border: none;padding: 0;margin: 0;cursor: pointer;">
                                <i class="fas fa-check-circle text-primary fs-5 icon-check"></i>
                            </button>
                            <form action="{{ url('/posts/remove-template') . '/' . $template->id }}" method="POST"
                                data-template-name="{{ $template->name }}" class="icon-cross">
                                @csrf
                                <input type="hidden" name="selectedCatId" value="{{ $selectedCatId }}">
                                <button type="submit"
                                    style="background: none;border: none;padding: 0;margin: 0;cursor: pointer;">
                                    <i class="fas fa-times-circle text-danger fs-5"></i>
                                </button>
                            </form>
                        @else
                            <i class="far fa-circle text-light-gray fs-5" style="opacity: 0.3"></i>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
        @if ($templatesPagination['last_page'] > 1)
            <div class="d-flex align-items-center justify-content-between p-2 mt-3 border-top">

                <div class="text-muted small">
                    Page {{ $templatesPagination['current_page'] }} of {{ $templatesPagination['last_page'] }}
                </div>

                <ul class="pagination pagination-sm my-0 mx-3">
                    @php
                        $currentPage = $templatesPagination['current_page'];
                        $lastPage = $templatesPagination['last_page'];

                        $prevUrl = $currentPage > 1 ? request()->fullUrlWithQuery(['page' => $currentPage - 1]) : '#';
                        $nextUrl =
                            $currentPage < $lastPage ? request()->fullUrlWithQuery(['page' => $currentPage + 1]) : '#';
                    @endphp
                    <li class="page-item {{ $templatesPagination['current_page'] == 1 ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ $prevUrl }}"
                            data-page="{{ $templatesPagination['current_page'] - 1 }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>

                    <li
                        class="page-item {{ $templatesPagination['current_page'] == $templatesPagination['last_page'] ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ $nextUrl }}"
                            data-page="{{ $templatesPagination['current_page'] + 1 }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>

                <div class="text-muted small">
                    Templates: {{ $templatesPagination['total'] }}
                </div>
            </div>
        @endif
    </div>
@endif

@push('after_styles_stack')
    <style>
        .bg-light-primary {
            background-color: #f8f9fc;
        }

        .border-transparent {
            border-color: transparent !important;
        }

        .transition-base {
            transition: all 0.2s ease-in-out;
        }

        .select-template:not(.bg-light-primary):hover {
            background-color: #fafafa;
        }

        .icon-cross {
            display: none;
        }

        .select-template.active:hover .icon-check {
            display: none;
        }

        .select-template.active:hover .icon-cross {
            display: inline-block;
            cursor: pointer;
        }
    </style>
@endpush

@push('after_scripts_stack')
    <script>
        $('.select-template').click(function() {
            const templateId = $(this).data('template-id');
            if (templateId == @json($selectedTemplateId)) return;
            const page = @json(request()->query('page'));

            let url = new URL(window.location.href);

            url.searchParams.set('template_id', templateId);
            if (page) {
                url.searchParams.set('page', page);
            }
            window.location.href = url.toString();
        })

        $('.icon-cross').click(function(e) {
            e.preventDefault();

            const $form = $(this).closest('form');
            const templateName = $form.data('template-name') ?? 'this';

            Swal.fire({
                title: 'Are you sure?',
                html: `Are you sure you want to <strong>remove the selected template</strong> "<strong>${templateName}</strong>" from this form?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, remove it',
                cancelButtonText: 'Cancel',
            }).then((result) => {
                if (result.isConfirmed) {
                    $form.submit();
                }
            });
        });
    </script>
@endpush