@extends('admin.layouts.app')

@section('title', 'Campaign Settings')

@section('content')
{{-- Current Status --}}
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="content-card text-center">
            <i class="bi bi-calendar-check" style="font-size:28px; color:#2d8e2d;"></i>
            <h4 class="mt-2 mb-0" style="font-weight:700;">Month {{ $currentCycle }}</h4>
            <p style="color:#888; font-size:13px; margin:0;">Current Cycle</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="content-card text-center">
            <i class="bi bi-box-seam" style="font-size:28px; color:#1565c0;"></i>
            <h4 class="mt-2 mb-0" style="font-weight:700;">{{ $wrapperRatio }}</h4>
            <p style="color:#888; font-size:13px; margin:0;">Wrappers per Point</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="content-card text-center">
            <i class="bi bi-play-circle" style="font-size:28px; color:#e8c50b;"></i>
            <h4 class="mt-2 mb-0" style="font-weight:700;">{{ $startDate ? \Carbon\Carbon::parse($startDate)->format('M d, Y') : '—' }}</h4>
            <p style="color:#888; font-size:13px; margin:0;">Campaign Start</p>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- Wrapper Ratio --}}
    <div class="col-md-5">
        <div class="content-card">
            <h5 style="font-weight:600; margin-bottom:20px;">
                <i class="bi bi-sliders" style="color:#2d8e2d;"></i> Wrapper Ratio
            </h5>

            <form method="POST" action="{{ route('admin.admin.settings.wrapper-ratio') }}">
                @csrf

                <div class="mb-3">
                    <label for="wrapper_ratio" class="form-label" style="font-weight:600; font-size:13px;">
                        How many wrappers = 1 point?
                    </label>
                    <input type="number" class="form-control @error('wrapper_ratio') is-invalid @enderror"
                           id="wrapper_ratio" name="wrapper_ratio"
                           value="{{ old('wrapper_ratio', $wrapperRatio) }}"
                           min="1" max="1000" required style="max-width:200px;">
                    @error('wrapper_ratio')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small style="color:#888; font-size:11px;">
                        Currently: {{ $wrapperRatio }} wrappers = 1 point
                    </small>
                </div>

                @if(auth()->user()->hasPermission('edit_settings'))
                <button type="submit" class="btn-submit" style="font-size:13px; padding:8px 20px;">Update Ratio</button>
                @endif
            </form>

            @if($allSettings->has('wrapper_ratio') && $allSettings->get('wrapper_ratio')->updater)
            <div style="margin-top:15px; padding-top:12px; border-top:1px solid #eee;">
                <small style="color:#999; font-size:11px;">
                    Last updated by {{ $allSettings->get('wrapper_ratio')->updater->full_name }}
                    on {{ $allSettings->get('wrapper_ratio')->updated_at->format('M d, Y h:i A') }}
                </small>
            </div>
            @endif
        </div>
    </div>

    {{-- Reset Dates --}}
    <div class="col-md-7">
        <div class="content-card">
            <h5 style="font-weight:600; margin-bottom:20px;">
                <i class="bi bi-calendar-range" style="color:#c62828;"></i> Monthly Reset Dates
            </h5>

            <p style="font-size:13px; color:#666; margin-bottom:15px;">
                Set when each month cycle ends. Points are preserved but a new cycle begins after each reset date.
            </p>

            {{-- Existing Reset Dates --}}
            <div class="table-responsive mb-3">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Month</th>
                            <th>Reset Date</th>
                            <th>Status</th>
                            <th style="width:80px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($resetDates as $rd)
                        <tr>
                            <td><strong>Month {{ $rd->month_number }}</strong></td>
                            <td>{{ $rd->reset_date->format('M d, Y') }} at {{ $rd->reset_date->format('h:i A') }}</td>
                            <td>
                                @if($rd->is_reset_done)
                                    <span class="badge-inactive" style="background:#e3f2fd; color:#1565c0;">Completed</span>
                                @elseif($rd->hasPassed())
                                    <span class="badge-inactive" style="background:#fff8e1; color:#f57f17;">Passed (pending reset)</span>
                                @else
                                    <span class="badge-active">Active</span>
                                @endif
                            </td>
                            <td>
                                @if(!$rd->is_reset_done && auth()->user()->hasPermission('edit_settings'))
                                <form method="POST" action="{{ route('admin.admin.settings.reset-dates.delete', $rd) }}"
                                      class="d-inline" onsubmit="return confirm('Delete reset date for Month {{ $rd->month_number }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-action deactivate" title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center" style="padding:20px; color:#999;">No reset dates configured.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Add New Reset Dates --}}
            @if(auth()->user()->hasPermission('edit_settings'))
            <div style="border-top:1px solid #eee; padding-top:20px;">
                <h6 style="font-weight:600; font-size:14px; margin-bottom:12px;">Add / Update Reset Dates</h6>

                <form method="POST" action="{{ route('admin.admin.settings.reset-dates') }}" id="resetDateForm">
                    @csrf

                    <div id="dateRows">
                        <div class="row g-2 mb-2 date-row" data-row="0">
                            <div class="col-md-4">
                                <input type="number" class="form-control" name="dates[0][month_number]"
                                       placeholder="Month number" min="1" max="24" required style="font-size:13px;">
                            </div>
                            <div class="col-md-5">
                                <input type="date" class="form-control" name="dates[0][reset_date]" required style="font-size:13px;">
                            </div>
                            <div class="col-md-3"></div>
                        </div>
                    </div>

                    <div class="d-flex gap-2 mt-2">
                        <button type="button" class="btn-add-row" onclick="addDateRow()" style="font-size:12px;">
                            <i class="bi bi-plus-circle"></i> Add Row
                        </button>
                        <button type="submit" class="btn-submit" style="font-size:13px; padding:8px 20px;">Save Dates</button>
                    </div>
                </form>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let dateRowCount = 1;

    function addDateRow() {
        const container = document.getElementById('dateRows');
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 date-row';
        row.dataset.row = dateRowCount;
        row.innerHTML = `
            <div class="col-md-4">
                <input type="number" class="form-control" name="dates[${dateRowCount}][month_number]"
                       placeholder="Month number" min="1" max="24" required style="font-size:13px;">
            </div>
            <div class="col-md-5">
                <input type="date" class="form-control" name="dates[${dateRowCount}][reset_date]" required style="font-size:13px;">
            </div>
            <div class="col-md-3">
                <button type="button" class="btn-action deactivate" onclick="this.closest('.date-row').remove()" title="Remove">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;
        container.appendChild(row);
        dateRowCount++;
    }
</script>
@endpush