{{-- resources/views/settings/seasons.blade.php --}}
@extends('layouts.app')
@section('title', 'Seasons')
@section('page_title', 'Seasons')
@section('page_subtitle', 'Define pricing seasons')

@section('content')

@include('settings.partials.nav')

<div class="row g-3">

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-calendar-range me-2"
                       style="color:var(--clay)"></i>
                    Seasons
                </span>
            </div>

            @if($seasons->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No seasons configured yet
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Rate Multiplier</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($seasons as $season)
                                @php
                                    $typeColors = [
                                        'low'      => ['bg'=>'#dbeafe','color'=>'#1e40af'],
                                        'shoulder' => ['bg'=>'#fef3c7','color'=>'#92400e'],
                                        'high'     => ['bg'=>'#d1fae5','color'=>'#065f46'],
                                        'peak'     => ['bg'=>'#fee2e2','color'=>'#991b1b'],
                                    ];
                                    $tc = $typeColors[$season->type] ?? $typeColors['low'];
                                @endphp
                                <tr>
                                    <td class="fw-semibold"
                                        style="font-size:.83rem;">
                                        {{ $season->name }}
                                    </td>
                                    <td>
                                        <span style="font-size:.72rem;font-weight:600;
                                                     padding:2px 8px;border-radius:20px;
                                                     background:{{ $tc['bg'] }};
                                                     color:{{ $tc['color'] }};">
                                            {{ ucfirst($season->type) }}
                                        </span>
                                    </td>
                                    <td style="font-size:.78rem;white-space:nowrap;">
                                        {{ $season->start_date->format('d M Y') }}
                                    </td>
                                    <td style="font-size:.78rem;white-space:nowrap;">
                                        {{ $season->end_date->format('d M Y') }}
                                    </td>
                                    <td style="font-size:.82rem;font-weight:600;
                                               color:var(--clay);">
                                        {{ $season->rate_multiplier ?? 1 }}×
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <button class="btn btn-xs btn-outline-secondary"
                                                    onclick="editSeason({{ $season->id }}, '{{ $season->name }}', '{{ $season->type }}', '{{ $season->start_date->toDateString() }}', '{{ $season->end_date->toDateString() }}', {{ $season->rate_multiplier ?? 1 }})">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <form method="POST"
                                                  action="{{ tenant_route('settings.seasons.destroy', ['season' => $season->id]) }}"
                                                  onsubmit="return confirm('Delete this season?')">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-xs btn-outline-danger"
                                                        type="submit">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card" id="seasonFormCard">
            <div class="card-header">
                <span class="card-title" id="seasonFormTitle">
                    Add Season
                </span>
            </div>
            <div class="card-body">
                <form method="POST"
                      id="seasonForm"
                      action="{{ tenant_route('settings.seasons.store') }}">
                    @csrf
                    <input type="hidden" name="_method"
                           id="seasonMethod" value="POST">

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="name" id="seasonName"
                               class="form-control"
                               placeholder="e.g. Zimbabwe School Holidays"
                               required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Type</label>
                        <select name="type" id="seasonType"
                                class="form-select">
                            <option value="low">Low Season</option>
                            <option value="shoulder">Shoulder Season</option>
                            <option value="high" selected>High Season</option>
                            <option value="peak">Peak Season</option>
                        </select>
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold">Start</label>
                            <input type="date" name="start_date"
                                   id="seasonStart" class="form-control"
                                   required>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">End</label>
                            <input type="date" name="end_date"
                                   id="seasonEnd" class="form-control"
                                   required>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Rate Multiplier
                        </label>
                        <div class="input-group">
                            <input type="number" name="rate_multiplier"
                                   id="seasonMultiplier"
                                   class="form-control"
                                   value="1.25"
                                   min="0.1" max="10" step="0.05">
                            <span class="input-group-text">×</span>
                        </div>
                        <div style="font-size:.68rem;color:var(--muted);margin-top:3px;">
                            e.g. 1.5 = 50% markup on base rates
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit"
                                class="btn btn-primary btn-sm">
                            Save Season
                        </button>
                        <button type="button"
                                onclick="resetSeasonForm()"
                                class="btn btn-outline-secondary btn-sm">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
function editSeason(id, name, type, start, end, mult) {
    document.getElementById('seasonFormTitle').textContent = 'Edit Season';
    document.getElementById('seasonMethod').value = 'PUT';
    document.getElementById('seasonName').value = name;
    document.getElementById('seasonType').value = type;
    document.getElementById('seasonStart').value = start;
    document.getElementById('seasonEnd').value = end;
    document.getElementById('seasonMultiplier').value = mult;

    const form = document.getElementById('seasonForm');
    form.action = form.action.replace(/\/seasons\/\d+$/, '')
        + '/seasons/' + id;
    form.querySelector('[name="_method"]').value = 'PUT';

    document.getElementById('seasonFormCard').scrollIntoView({ behavior: 'smooth' });
}

function resetSeasonForm() {
    document.getElementById('seasonFormTitle').textContent = 'Add Season';
    document.getElementById('seasonForm').reset();
    document.getElementById('seasonMethod').value = 'POST';
    document.getElementById('seasonForm').action =
        '{{ tenant_route('settings.seasons.store') }}';
}
</script>
@endpush