@extends('dashboard.layouts.app')

@section('title', __('dashboard.Custom Pages'))
@section('page_heading', __('dashboard.Custom Pages'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item">
        <span class="bullet bg-gray-500 w-5px h-2px"></span>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Custom Pages') }}</li>
@endsection

@section('actions')
    <a href="{{ route('dashboard.custom-pages.create') }}" class="btn btn-primary">
        {{ __('dashboard.Add New Custom Page') }}
    </a>
@endsection

@section('content')
    <div class="row g-7">
        <div class="col-xl-12">
            <div class="card card-flush h-lg-100">
                <div class="card-header pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-gray-800">{{ __('dashboard.Custom Pages') }}</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">{{ $customPages->count() }} {{ trans_choice('dashboard.Custom Page', $customPages->count()) }}</span>
                    </h3>
                </div>
                <div class="card-body pt-6">
                    @if($customPages->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
                                <thead>
                                    <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
                                        <th class="p-0 pb-3 min-w-50px text-start">{{ __('dashboard.ID') }}</th>
                                        <th class="p-0 pb-3 min-w-150px">{{ __('dashboard.Name') }}</th>
                                        <th class="p-0 pb-3 min-w-150px">{{ __('dashboard.Title') }}</th>
                                        <th class="p-0 pb-3 min-w-150px">{{ __('dashboard.Slug') }}</th>
                                        <th class="p-0 pb-3 min-w-50px">{{ __('dashboard.Active') }}</th>
                                        <th class="p-0 pb-3 min-w-100px text-end">{{ __('dashboard.Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($customPages as $customPage)
                                        <tr>
                                            <td>
                                                <span class="text-gray-600 fw-bold fs-6">{{ $customPage->id }}</span>
                                            </td>
                                            <td>
                                                <span class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{ $customPage->name }}</span>
                                            </td>
                                            <td>
                                                <span class="text-gray-600 fw-bold fs-6">{{ $customPage->title }}</span>
                                            </td>
                                            <td>
                                                <span class="text-gray-600 fw-bold fs-6">{{ $customPage->slug }}</span>
                                            </td>
                                            <td>
                                                <span class="badge {{ $customPage->is_active ? 'badge-light-success' : 'badge-light-danger' }}">{{ $customPage->is_active ? __('dashboard.Active') : __('dashboard.Inactive') }}</span>
                                            </td>
                                            <td class="text-end">
                                                <div class="d-flex justify-content-end flex-shrink-0">
                                                    <a href="{{ route('custom-page', $customPage->slug) }}" target="_blank" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('dashboard.View on Website') }}">
                                                        <i class="bi bi-globe fs-3"></i>
                                                    </a>
                                                    <a href="{{ route('dashboard.custom-pages.show', $customPage) }}" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1">
                                                        <i class="bi bi-eye-fill fs-3"></i>
                                                    </a>
                                                    <a href="{{ route('dashboard.custom-pages.edit', $customPage) }}" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1">
                                                        <i class="bi bi-pencil-square fs-3"></i>
                                                    </a>
                                                    <form action="{{ route('dashboard.custom-pages.destroy', $customPage) }}" method="POST" id="delete-form-{{$customPage->id}}">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="button" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm" onclick="confirmDelete('delete-form-{{$customPage->id}}')">
                                                            <i class="bi bi-trash fs-3"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-warning">
                            {{ __('dashboard.No custom pages found.') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function confirmDelete(formId) {
            Swal.fire({
                title: "{{ __('dashboard.Are you sure?') }}",
                text: "{{ __('dashboard.You will not be able to revert this!') }}",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "{{ __('dashboard.Yes, delete it!') }}",
                cancelButtonText: "{{ __('dashboard.Cancel') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById(formId).submit();
                }
            });
        }
    </script>
@endsection