@extends('admin.layouts.app')

@section('title', 'Offers & Packages')
@section('page_title', 'Offers & Packages')

@section('content')
    <div class="page-heading">
        <div>
            <h1>Offers & Packages</h1>

            <p>
                Manage room, event, dining and general packages.
            </p>
        </div>

        <a
            href="{{ route('admin.offer-packages.create') }}"
            class="btn btn-primary"
        >
            + Add Package
        </a>
    </div>

    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <div class="panel filter-panel">
        <form
            action="{{ route('admin.offer-packages.index') }}"
            method="GET"
            class="package-filters"
        >
            <div class="filter-field search-field">
                <label for="search" class="form-label">Search</label>

                <input
                    type="text"
                    name="search"
                    id="search"
                    value="{{ request('search') }}"
                    class="form-control"
                    placeholder="Package name, title or description..."
                >
            </div>

            <div class="filter-field">
                <label for="package_type" class="form-label">
                    Package Type
                </label>

                <select
                    name="package_type"
                    id="package_type"
                    class="form-control"
                >
                    <option value="">All Types</option>

                    <option
                        value="room"
                        @selected(request('package_type') === 'room')
                    >
                        Room
                    </option>

                    <option
                        value="event"
                        @selected(request('package_type') === 'event')
                    >
                        Event
                    </option>

                    <option
                        value="dining"
                        @selected(request('package_type') === 'dining')
                    >
                        Dining
                    </option>

                    <option
                        value="general"
                        @selected(request('package_type') === 'general')
                    >
                        General
                    </option>
                </select>
            </div>

            <div class="filter-field">
                <label for="status" class="form-label">Status</label>

                <select
                    name="status"
                    id="status"
                    class="form-control"
                >
                    <option value="">All Statuses</option>

                    <option
                        value="active"
                        @selected(request('status') === 'active')
                    >
                        Active
                    </option>

                    <option
                        value="inactive"
                        @selected(request('status') === 'inactive')
                    >
                        Inactive
                    </option>
                </select>
            </div>

            <div class="filter-field">
                <label for="featured" class="form-label">
                    Placement
                </label>

                <select
                    name="featured"
                    id="featured"
                    class="form-control"
                >
                    <option value="">All Packages</option>

                    <option
                        value="yes"
                        @selected(request('featured') === 'yes')
                    >
                        Featured
                    </option>

                    <option
                        value="no"
                        @selected(request('featured') === 'no')
                    >
                        Regular
                    </option>
                </select>
            </div>

            <div class="filter-field">
                <label for="availability" class="form-label">
                    Availability
                </label>

                <select
                    name="availability"
                    id="availability"
                    class="form-control"
                >
                    <option value="">All Dates</option>

                    <option
                        value="current"
                        @selected(request('availability') === 'current')
                    >
                        Currently Available
                    </option>

                    <option
                        value="upcoming"
                        @selected(request('availability') === 'upcoming')
                    >
                        Upcoming
                    </option>

                    <option
                        value="expired"
                        @selected(request('availability') === 'expired')
                    >
                        Expired
                    </option>
                </select>
            </div>

            <div class="filter-actions">
                <button type="submit" class="btn btn-primary">
                    Filter
                </button>

                <a
                    href="{{ route('admin.offer-packages.index') }}"
                    class="btn btn-secondary"
                >
                    Reset
                </a>
            </div>
        </form>
    </div>

    <div class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Package List</h2>

                <div class="panel-subtitle">
                    {{ $offerPackages->total() }}
                    package(s) found
                </div>
            </div>
        </div>

        <div class="table-wrap">
            <table class="package-table">
                <thead>
                    <tr>
                        <th>Package</th>
                        <th>Type & Relation</th>
                        <th>Price</th>
                        <th>Availability</th>
                        <th class="text-center">Featured</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Order</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($offerPackages as $offerPackage)
                        @php
                            $today = now()->startOfDay();

                            if (
                                $offerPackage->end_date &&
                                $offerPackage->end_date->lt($today)
                            ) {
                                $availabilityLabel = 'Expired';
                                $availabilityClass = 'availability-expired';
                            } elseif (
                                $offerPackage->start_date &&
                                $offerPackage->start_date->gt($today)
                            ) {
                                $availabilityLabel = 'Upcoming';
                                $availabilityClass = 'availability-upcoming';
                            } elseif($offerPackage->status) {
                                $availabilityLabel = 'Available';
                                $availabilityClass = 'availability-current';
                            } else {
                                $availabilityLabel = 'Unavailable';
                                $availabilityClass = 'availability-inactive';
                            }

                            $relationName = match(
                                $offerPackage->package_type
                            ) {
                                'room' =>
                                    optional(
                                        $offerPackage->roomType
                                    )->name,

                                'event' =>
                                    optional(
                                        $offerPackage->eventType
                                    )->name
                                    ?: optional(
                                        $offerPackage->venue
                                    )->name,

                                'dining' =>
                                    optional(
                                        $offerPackage->venue
                                    )->name,

                                default => null,
                            };
                        @endphp

                        <tr>
                            <td>
                                <div class="package-summary">
                                    <div class="package-thumbnail">
                                        @if($offerPackage->featured_image)
                                            <img
                                                src="{{ asset(
                                                    'storage/' .
                                                    $offerPackage
                                                        ->featured_image
                                                ) }}"
                                                alt="{{ $offerPackage->name }}"
                                            >
                                        @else
                                            IMG
                                        @endif
                                    </div>

                                    <div>
                                        <div class="package-name">
                                            {{ $offerPackage->name }}
                                        </div>

                                        @if($offerPackage->small_title)
                                            <div class="muted-text">
                                                {{
                                                    $offerPackage
                                                        ->small_title
                                                }}
                                            </div>
                                        @endif

                                        <div class="slug-text">
                                            /{{ $offerPackage->slug }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td>
                                <span class="type-badge type-{{
                                    $offerPackage->package_type
                                }}">
                                    {{
                                        $offerPackage
                                            ->package_type_label
                                    }}
                                </span>

                                <div class="relation-text">
                                    {{ $relationName
                                        ?: 'No related service' }}
                                </div>

                                @if(
                                    $offerPackage->package_type === 'event'
                                    && $offerPackage->venue
                                    && $offerPackage->eventType
                                )
                                    <div class="muted-text">
                                        Venue:
                                        {{ $offerPackage->venue->name }}
                                    </div>
                                @endif
                            </td>

                            <td>
                                @if($offerPackage->has_discount)
                                    <div class="offer-price">
                                        ৳{{ number_format(
                                            (float)
                                            $offerPackage->offer_price,
                                            2
                                        ) }}
                                    </div>

                                    <div class="regular-price-old">
                                        ৳{{ number_format(
                                            (float)
                                            $offerPackage->regular_price,
                                            2
                                        ) }}
                                    </div>

                                    <span class="discount-badge">
                                        {{
                                            $offerPackage
                                                ->discount_percentage
                                        }}% OFF
                                    </span>
                                @else
                                    <div class="regular-price">
                                        ৳{{ number_format(
                                            (float)
                                            $offerPackage->regular_price,
                                            2
                                        ) }}
                                    </div>
                                @endif
                            </td>

                            <td>
                                <span class="availability-badge {{
                                    $availabilityClass
                                }}">
                                    {{ $availabilityLabel }}
                                </span>

                                <div class="date-text">
                                    @if(
                                        $offerPackage->start_date ||
                                        $offerPackage->end_date
                                    )
                                        {{
                                            $offerPackage->start_date
                                                ? $offerPackage
                                                    ->start_date
                                                    ->format('d M Y')
                                                : 'Any time'
                                        }}
                                        —
                                        {{
                                            $offerPackage->end_date
                                                ? $offerPackage
                                                    ->end_date
                                                    ->format('d M Y')
                                                : 'No expiry'
                                        }}
                                    @else
                                        No date restriction
                                    @endif
                                </div>
                            </td>

                            <td class="text-center">
                                <form
                                    action="{{ route(
                                        'admin.offer-packages.toggle-featured',
                                        $offerPackage
                                    ) }}"
                                    method="POST"
                                >
                                    @csrf
                                    @method('PATCH')

                                    <button
                                        type="submit"
                                        class="status-button {{
                                            $offerPackage->is_featured
                                                ? 'is-featured'
                                                : ''
                                        }}"
                                    >
                                        {{ $offerPackage->is_featured
                                            ? 'Featured'
                                            : 'Regular' }}
                                    </button>
                                </form>
                            </td>

                            <td class="text-center">
                                <form
                                    action="{{ route(
                                        'admin.offer-packages.toggle-status',
                                        $offerPackage
                                    ) }}"
                                    method="POST"
                                >
                                    @csrf
                                    @method('PATCH')

                                    <button
                                        type="submit"
                                        class="badge status-button {{
                                            $offerPackage->status
                                                ? 'badge-success'
                                                : 'badge-danger'
                                        }}"
                                    >
                                        {{ $offerPackage->status
                                            ? 'Active'
                                            : 'Inactive' }}
                                    </button>
                                </form>
                            </td>

                            <td class="text-center">
                                <span class="badge badge-role">
                                    {{ $offerPackage->sort_order }}
                                </span>
                            </td>

                            <td class="text-right">
                                <div
                                    class="action-group action-group-end"
                                >
                                    <a
                                        href="{{ route(
                                            'admin.offer-packages.edit',
                                            $offerPackage
                                        ) }}"
                                        class="btn btn-secondary btn-small"
                                    >
                                        Edit
                                    </a>

                                    <form
                                        action="{{ route(
                                            'admin.offer-packages.destroy',
                                            $offerPackage
                                        ) }}"
                                        method="POST"
                                        class="delete-package-form"
                                    >
                                        @csrf
                                        @method('DELETE')

                                        <button
                                            type="submit"
                                            class="btn btn-danger btn-small"
                                        >
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                <div class="empty-state">
                                    <div class="empty-state-mark">
                                        P
                                    </div>

                                    <h3>No package found</h3>

                                    <p>
                                        Add your first offer or package.
                                    </p>

                                    <a
                                        href="{{ route(
                                            'admin.offer-packages.create'
                                        ) }}"
                                        class="btn btn-primary"
                                    >
                                        + Add Package
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($offerPackages->hasPages())
            <div class="panel-footer pagination">
                {{ $offerPackages->links() }}
            </div>
        @endif
    </div>
@endsection

@push('styles')
<style>
    .filter-panel {
        margin-bottom: 24px;
    }

    .package-filters {
        display: grid;
        grid-template-columns:
            minmax(230px, 2fr)
            repeat(4, minmax(135px, 1fr))
            auto;
        gap: 14px;
        align-items: end;
        padding: 20px 24px;
    }

    .filter-actions {
        display: flex;
        gap: 8px;
    }

    .panel-subtitle,
    .muted-text,
    .slug-text,
    .relation-text,
    .date-text {
        color: var(--muted);
        font-size: 12px;
    }

    .panel-subtitle {
        margin-top: 5px;
    }

    .slug-text,
    .relation-text,
    .date-text {
        margin-top: 5px;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .package-table {
        min-width: 1320px;
    }

    .package-summary {
        display: flex;
        align-items: center;
        gap: 13px;
        min-width: 280px;
    }

    .package-thumbnail {
        width: 76px;
        height: 56px;
        flex: 0 0 76px;
        overflow: hidden;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: #edf2f5;
        color: #91a0a8;
        font-size: 10px;
        font-weight: 700;
    }

    .package-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .package-name {
        color: var(--navy);
        font-weight: 700;
    }

    .type-badge,
    .availability-badge,
    .discount-badge {
        display: inline-flex;
        align-items: center;
        min-height: 25px;
        padding: 5px 9px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 700;
    }

    .type-room {
        background: #e8f1ff;
        color: #3266a8;
    }

    .type-event {
        background: #f4eaff;
        color: #7445a8;
    }

    .type-dining {
        background: #fff0e4;
        color: #ad5b22;
    }

    .type-general {
        background: #edf2f5;
        color: #526975;
    }

    .regular-price,
    .offer-price {
        color: var(--navy);
        font-weight: 700;
        white-space: nowrap;
    }

    .offer-price {
        color: var(--success);
    }

    .regular-price-old {
        margin: 3px 0;
        color: #8c9aa2;
        font-size: 12px;
        text-decoration: line-through;
    }

    .discount-badge {
        background: #e8f8ee;
        color: var(--success);
    }

    .availability-current {
        background: #e8f8ee;
        color: var(--success);
    }

    .availability-upcoming {
        background: #e8f1ff;
        color: #3266a8;
    }

    .availability-expired,
    .availability-inactive {
        background: #fff0ef;
        color: var(--danger);
    }

    .status-button {
        min-height: 30px;
        padding: 6px 10px;
        border: 0;
        border-radius: 20px;
        cursor: pointer;
        background: #edf2f5;
        color: #526975;
        font-size: 11px;
        font-weight: 700;
    }

    .status-button.is-featured {
        background: #fff7df;
        color: #946c16;
    }

    .action-group-end {
        justify-content: flex-end;
    }

    .btn-small {
        min-height: 34px;
        padding: 7px 11px;
    }

    .panel-footer {
        padding: 0 24px 22px;
    }

    .empty-state {
        padding: 55px 20px;
        text-align: center;
    }

    .empty-state-mark {
        width: 52px;
        height: 52px;
        margin: 0 auto 15px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #edf2f5;
        color: var(--navy);
        font-family: Georgia, serif;
        font-size: 24px;
    }

    .empty-state h3 {
        margin: 0 0 8px;
        font-family: Georgia, serif;
        font-weight: 500;
    }

    .empty-state p {
        margin: 0 0 18px;
        color: var(--muted);
    }

    @media (max-width: 1250px) {
        .package-filters {
            grid-template-columns:
                repeat(3, minmax(0, 1fr));
        }

        .search-field {
            grid-column: span 2;
        }
    }

    @media (max-width: 760px) {
        .package-filters {
            grid-template-columns: 1fr;
        }

        .search-field {
            grid-column: auto;
        }

        .filter-actions {
            flex-wrap: wrap;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document
            .querySelectorAll('.delete-package-form')
            .forEach(function (form) {
                form.addEventListener(
                    'submit',
                    function (event) {
                        if (
                            !window.confirm(
                                'Are you sure you want to delete ' +
                                'this offer or package?'
                            )
                        ) {
                            event.preventDefault();
                        }
                    }
                );
            });
    });
</script>
@endpush