@extends('layouts.app')

@section('title', 'Renew Subscription')

@section('content')

<div class="page-header">

    <div class="page-header-left">

        <div class="page-icon">
            <svg width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="1.8"
                 stroke-linecap="round"
                 stroke-linejoin="round">

                <path d="M4 4v5h.582"/>
                <path d="M4.582 9A8 8 0 0 1 19.5 12"/>
                <path d="M20 20v-5h-.582"/>
                <path d="M19.418 15A8 8 0 0 1 4.5 12"/>
            </svg>
        </div>

        <div>
            <h1 class="page-title">Renew Subscription</h1>

            <p class="page-subtitle">
                Renew the subscription for {{ $temple->temple_name }}
            </p>
        </div>

    </div>

    <div class="page-header-actions">

        <a href="{{ route('admin.temples.expired') }}"
           class="btn btn--outline">

            <svg width="16"
                 height="16"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2">

                <path d="M19 12H5"/>
                <path d="M12 19l-7-7 7-7"/>
            </svg>

            Back to Expired Subscriptions

        </a>

    </div>

</div>


{{-- Error message --}}
@if(session('error'))

    <div class="alert alert--error">

        <svg width="18"
             height="18"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2">

            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8v4M12 16h.01"/>

        </svg>

        {{ session('error') }}

        <button type="button"
                class="alert-close"
                onclick="this.parentElement.remove()">
            &times;
        </button>

    </div>

@endif


{{-- Validation errors --}}
@if($errors->any())

    <div class="alert alert--error">

        <strong>Please correct the following:</strong>

        <ul style="margin:8px 0 0 18px;">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>

    </div>

@endif


<div class="card renew-card">

    <div class="card-body">

        {{-- =========================================================
             TEMPLE DETAILS
        ========================================================== --}}

        <div class="renew-info-box">

            <div class="renew-info-header">
                <h3 class="renew-info-title">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round"
                         stroke-linejoin="round" class="renew-info-title-icon">
                        <path d="M3 21h18"/>
                        <path d="M5 21V7l7-4 7 4v14"/>
                        <path d="M9 21v-6h6v6"/>
                    </svg>
                    Registered Temple Details
                </h3>

                <span class="expired-pill">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                         stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M12 6v6l4 2"/>
                    </svg>
                    {{ $daysExpired ?? 0 }} days expired
                </span>
            </div>

            <div class="renew-info-grid">

                {{-- Temple Name --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        Temple Name
                    </span>

                    <span class="renew-value">
                        {{ $temple->temple_name }}
                    </span>

                </div>


                {{-- Registration Number --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        Registration Number
                    </span>

                    <span class="renew-value">
                        {{ $temple->registration_number ?? 'N/A' }}
                    </span>

                </div>


                {{-- Location --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        Location
                    </span>

                    <span class="renew-value">
                        {{ $temple->location ?? 'N/A' }}
                    </span>

                </div>


                {{-- District --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        District
                    </span>

                    <span class="renew-value">
                        {{ $temple->district ?? 'N/A' }}
                    </span>

                </div>


                {{-- Contact --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        Contact Number
                    </span>

                    <span class="renew-value">
                        {{ $temple->contact_number ?? 'N/A' }}
                    </span>

                </div>


                {{-- Email --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        Email
                    </span>

                    <span class="renew-value">
                        {{ $temple->email ?? 'N/A' }}
                    </span>

                </div>


                {{-- Current Status --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        Current Status
                    </span>

                    <span class="renew-value">

                        <span class="status-badge status-badge--{{ $temple->status }}">
                            <span class="status-dot"></span>

                            {{ ucfirst($temple->status) }}
                        </span>

                    </span>

                </div>


                {{-- Renewal Status --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        Renewal Status
                    </span>

                    <span class="renew-value">

                        @if($temple->renew_status === 'renewed')

                            <span class="status-badge status-badge--active">
                                <span class="status-dot"></span>
                                Renewed
                            </span>

                        @else

                            <span class="status-badge status-badge--pending">
                                <span class="status-dot"></span>
                                Pending
                            </span>

                        @endif

                    </span>

                </div>


                {{-- Current Expiry --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        Current Expiry Date
                    </span>

                    <span class="renew-value">
                        {{ \Carbon\Carbon::parse($temple->expiry_date)->format('d M Y') }}
                    </span>

                </div>


                {{-- Days Expired --}}
                @php
                    $expiry = \Carbon\Carbon::parse($temple->expiry_date);
                    $today = \Carbon\Carbon::today();
                    $daysExpired = $expiry->diffInDays($today);
                    $oneMonthCompleted = $expiry->lte($today->copy()->subMonth());
                @endphp

                <div class="renew-info-item">

                    <span class="renew-label">
                        Subscription Status
                    </span>

                    <span class="renew-value">

                        @if($oneMonthCompleted)

                            <span class="status-badge status-badge--expired">
                                <span class="status-dot"></span>
                                One Month Completed
                            </span>

                        @else

                            <span class="status-badge status-badge--pending">
                                <span class="status-dot"></span>
                                Pending
                            </span>

                        @endif

                    </span>

                </div>


                <div class="renew-info-item">

                    <span class="renew-label">
                        Days Expired
                    </span>

                    <span class="renew-value">

                        <span class="expired-pill">
                            {{ $daysExpired }} days
                        </span>

                    </span>

                </div>


                {{-- Notification --}}
                <div class="renew-info-item">

                    <span class="renew-label">
                        One Month Notification
                    </span>

                    <span class="renew-value">

                        @if($temple->one_month_notification_sent_at)

                            Sent on
                            {{ \Carbon\Carbon::parse($temple->one_month_notification_sent_at)->format('d M Y') }}

                        @else

                            <span class="notification-not-sent">
                                Not Sent
                            </span>

                        @endif

                    </span>

                </div>

            </div>

        </div>


        {{-- =========================================================
             RENEWAL FORM
        ========================================================== --}}

        <form action="{{ route('admin.temples.renew.store', $temple->id) }}"
              method="POST"
              class="renew-form">

            @csrf

            <h3 class="renew-form-title">Renewal Details</h3>

            <div class="form-grid">

                {{-- Renewal Date --}}
                <div class="form-group">

                    <label class="form-label form-label--required">
                        Renewal Date
                    </label>

                    <input type="date"
                           name="renewal_date"
                           value="{{ old('renewal_date', now()->format('Y-m-d')) }}"
                           min="{{ now()->format('Y-m-d') }}"
                           class="form-input @error('renewal_date') form-input--error @enderror"
                           required>

                    @error('renewal_date')
                        <span class="form-error">
                            {{ $message }}
                        </span>
                    @enderror

                </div>


                {{-- Duration --}}
                <div class="form-group">

                    <label class="form-label form-label--required">
                        Subscription Duration
                    </label>

                    <select name="renewal_duration"
                            class="form-select @error('renewal_duration') form-input--error @enderror"
                            required>

                        <option value="1"
                            {{ old('renewal_duration') == '1' ? 'selected' : '' }}>
                            1 Month
                        </option>

                        <option value="3"
                            {{ old('renewal_duration') == '3' ? 'selected' : '' }}>
                            3 Months
                        </option>

                        <option value="6"
                            {{ old('renewal_duration') == '6' ? 'selected' : '' }}>
                            6 Months
                        </option>

                        <option value="12"
                            {{ old('renewal_duration', '12') == '12' ? 'selected' : '' }}>
                            1 Year
                        </option>

                        <option value="24"
                            {{ old('renewal_duration') == '24' ? 'selected' : '' }}>
                            2 Years
                        </option>

                    </select>

                    @error('renewal_duration')
                        <span class="form-error">
                            {{ $message }}
                        </span>
                    @enderror

                </div>

            </div>


            {{-- Form Actions --}}
            <div class="form-actions">

                <a href="{{ route('admin.temples.expired') }}"
                   class="btn btn--outline">
                    Cancel
                </a>

                <button type="submit"
                        class="btn btn--primary">

                    <svg width="16"
                         height="16"
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="2"
                         stroke-linecap="round"
                         stroke-linejoin="round">

                        <path d="M4 4v5h.582"/>
                        <path d="M4.582 9A8 8 0 0 1 19.5 12"/>
                        <path d="M20 20v-5h-.582"/>
                        <path d="M19.418 15A8 8 0 0 1 4.5 12"/>

                    </svg>

                    Confirm Renewal

                </button>

            </div>

        </form>

    </div>

</div>

@endsection


@push('styles')

<style>

    .renew-card {
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    }

    .renew-info-box {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 22px 24px;
        margin-bottom: 28px;
    }

    .renew-info-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid #e5e7eb;
        flex-wrap: wrap;
    }

    .renew-info-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

    .renew-info-title-icon {
        color: #7c1d3f;
        flex-shrink: 0;
    }

    .renew-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px 24px;
    }

    .renew-info-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .renew-label {
        font-size: 11px;
        color: #6b7280;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .renew-value {
        font-size: 14px;
        color: #1a1a2e;
        font-weight: 600;
        line-height: 1.4;
    }

    .notification-not-sent {
        color: #b91c1c;
        font-weight: 600;
    }

    .expired-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        width: fit-content;
        padding: 5px 12px;
        border-radius: 999px;
        background: #fee2e2;
        color: #b91c1c;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .renew-form-title {
        font-size: 15px;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0 0 18px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px 24px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .form-label {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

    .form-label--required::after {
        content: ' *';
        color: #b91c1c;
    }

    .form-input,
    .form-select {
        font-size: 14px;
        color: #1a1a2e;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #fff;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .form-input:focus,
    .form-select:focus {
        outline: none;
        border-color: #7c1d3f;
        box-shadow: 0 0 0 3px rgba(124, 29, 63, .12);
    }

    .form-input--error {
        border-color: #dc2626;
    }

    .form-error {
        font-size: 12px;
        color: #dc2626;
        margin-top: 2px;
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid #e5e7eb;
    }

    .form-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
    }

    .form-actions .btn--primary {
        background: #7c1d3f;
        color: #fff;
        border: 1px solid #7c1d3f;
    }

    .form-actions .btn--primary:hover {
        background: #661731;
    }

    .form-actions .btn--primary:active {
        transform: translateY(1px);
    }

    .form-actions .btn--outline {
        background: #fff;
        color: #374151;
        border: 1px solid #d1d5db;
    }

    .form-actions .btn--outline:hover {
        background: #f9fafb;
    }

    @media (max-width: 600px) {

        .renew-info-grid,
        .form-grid {
            grid-template-columns: 1fr;
        }

        .renew-info-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .form-actions {
            flex-direction: column-reverse;
        }

        .form-actions .btn {
            width: 100%;
            justify-content: center;
        }

    }

</style>

@endpush