@extends('layouts.app')

@section('title', 'Edit deal #' . $deal->id)

@section('content')
<h1>Edit deal #{{ $deal->id }}</h1>

<p style="margin-bottom:1rem;">{{ $deal->dealProducts->count() }} product(s). Change when the deal should end (prices will restore at that time).</p>

<form id="deal-edit-form" method="post" action="{{ route('deals.update', $deal) }}" style="max-width:400px;">
    @csrf
    @method('PUT')
    @php $dealTz = config('app.deals_display_timezone', 'America/New_York'); @endphp
    <div style="margin-bottom:1rem;">
        <label for="ends_at_local" style="display:block; font-size:0.9rem; margin-bottom:0.25rem;">End date & time</label>
        {{-- datetime-local uses the browser clock; we convert on submit so digits always mean deals_display_timezone (e.g. Miami/Eastern), not the server PC timezone. --}}
        <input type="datetime-local" id="ends_at_local" value="{{ $deal->ends_at ? $deal->ends_at->copy()->timezone($dealTz)->format('Y-m-d\TH:i') : '' }}"
               required step="60" style="width:100%; padding:0.5rem; border:1px solid #d1d5db; border-radius:6px;" autocomplete="off">
        <input type="hidden" name="ends_at" id="ends_at_utc" value="">
        <p style="margin:0.35rem 0 0 0; font-size:0.8rem; color:#6b7280; line-height:1.4;">Enter the end time in <strong>{{ $dealTz }}</strong> (not your computer’s timezone if it differs). After Save, the banner shows the stored time.</p>
        @error('ends_at')
            <span style="color:#dc2626; font-size:0.85rem;">{{ $message }}</span>
        @enderror
    </div>
    <div style="display:flex; gap:0.5rem;">
        <button type="submit" class="btn btn-primary">Save</button>
        <a href="{{ route('deals.index') }}" class="btn btn-secondary">Cancel</a>
    </div>
</form>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js" crossorigin="anonymous"></script>
<script>
(function () {
    var dealTz = @json($dealTz ?? config('app.deals_display_timezone', 'America/New_York'));
    var form = document.getElementById('deal-edit-form');
    var localEl = document.getElementById('ends_at_local');
    var utcEl = document.getElementById('ends_at_utc');
    if (!form || !localEl || !utcEl) return;
    form.addEventListener('submit', function (e) {
        var lux = window.luxon;
        if (!lux || !lux.DateTime) {
            e.preventDefault();
            alert('Could not load date helper. Check your network or disable strict blockers, then try again.');
            return;
        }
        var wall = (localEl.value || '').trim();
        if (!wall) return;
        var dt = lux.DateTime.fromISO(wall, { zone: dealTz });
        if (!dt.isValid) {
            e.preventDefault();
            alert('Invalid date or time. Use the calendar control and try again.');
            return;
        }
        utcEl.value = dt.toUTC().toISO();
    });
})();
</script>
@endpush