@extends('layouts/contentLayoutMaster')

@section('title', 'Milk Outsale Report')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
@endsection

@section('page-style')
<style>
    .report-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; margin-bottom: 1rem; }

    .form-step { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
    .form-step__num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
        justify-content: center; font-size: .8rem; font-weight: 600; background: rgba(115, 103, 240, .12); color: #7367f0; }
    .form-step h5 { margin: 0; font-weight: 600; }

    .date-presets { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
    .date-presets .btn { border-radius: 2rem; padding: .25rem .8rem; font-size: .8rem; }

    .option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; }
    .option-card { position: relative; }
    .option-card input { position: absolute; opacity: 0; pointer-events: none; }
    .option-card label { display: flex; align-items: flex-start; gap: .65rem; height: 100%; margin: 0; cursor: pointer;
        padding: .75rem .9rem; border: 1px solid rgba(34, 41, 47, .15); border-radius: .5rem; transition: border-color .15s, background .15s; }
    .option-card label:hover { border-color: rgba(115, 103, 240, .6); }
    .option-card__radio { flex: 0 0 16px; height: 16px; margin-top: .15rem; border-radius: 50%; border: 2px solid rgba(34, 41, 47, .3);
        transition: border-color .15s, box-shadow .15s; }
    .option-card__title { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; }
    .option-card__desc { display: block; font-size: .78rem; opacity: .65; margin-top: .1rem; line-height: 1.35; }
    .option-card input:checked + label { border-color: #7367f0; background: rgba(115, 103, 240, .06); }
    .option-card input:checked + label .option-card__radio { border-color: #7367f0; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px #7367f0; }
    .option-card input:focus-visible + label { outline: 2px solid rgba(115, 103, 240, .5); outline-offset: 2px; }
    .option-group.is-invalid .option-card label { border-color: #ea5455; }

    .report-info { border-radius: .5rem; padding: 1.1rem 1.2rem; background: rgba(34, 41, 47, .03);
        border: 1px solid rgba(34, 41, 47, .08); }
    .report-info h6 { font-weight: 600; margin-bottom: .9rem; }
    .report-info__row { display: flex; gap: .7rem; margin-bottom: .9rem; font-size: .85rem; line-height: 1.4; }
    .report-info__row:last-child { margin-bottom: 0; }
    .report-info__badge { flex: 0 0 auto; min-width: 82px; text-align: center; height: fit-content; font-size: .7rem; font-weight: 600;
        padding: .2rem .5rem; border-radius: .3rem; }
    .report-info__badge--dispatch { background: rgba(0, 123, 255, .12); color: #1e88e5; }
    .report-info__badge--reception { background: rgba(40, 199, 111, .12); color: #28c76f; }
    .report-info__badge--variance { background: rgba(255, 159, 67, .14); color: #ff9f43; }
    .report-info__badge--note { background: rgba(0, 207, 232, .12); color: #00cfe8; }

    .report-actions { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; border-top: 1px solid rgba(34, 41, 47, .08);
        padding-top: 1.25rem; margin-top: 1.5rem; }

    .dark-layout .option-card label { border-color: rgba(255, 255, 255, .15); }
    .dark-layout .option-card__radio { border-color: rgba(255, 255, 255, .35); }
    .dark-layout .option-card input:checked + label .option-card__radio { box-shadow: inset 0 0 0 3px #283046, inset 0 0 0 8px #7367f0; }
    .dark-layout .report-info { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
    .dark-layout .report-actions { border-top-color: rgba(255, 255, 255, .08); }
</style>
@endsection

@section('content')
@php
    $selectedLevel = old('report_level', 'SHED');
    $selectedType = old('outsale_type', 'All');
@endphp
<section class="report-page">

    <a href="{{ route('system.reports') }}" class="report-back">
        <i class="fa-solid fa-arrow-left"></i> All Reports
    </a>

    <div class="card pt-2">
        <div class="card-body">
            <form id="milkOutsaleReportForm" action="{{ route('generate.system.report', 'MILK_OUTSALE_REPORT') }}" method="POST" novalidate>
                @csrf

                <div class="row g-2">
                    <div class="col-lg-7">

                        {{-- Step 1: period --}}
                        <div class="form-step">
                            <span class="form-step__num">1</span>
                            <h5>Report Period</h5>
                        </div>
                        <div class="row g-1">
                            <div class="col-sm-6">
                                <label for="from_date" class="form-label">From Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('from_date') is-invalid @enderror"
                                       id="from_date" name="from_date" value="{{ old('from_date') }}" required>
                                @error('from_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="to_date" class="form-label">To Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('to_date') is-invalid @enderror"
                                       id="to_date" name="to_date" value="{{ old('to_date') }}" required>
                                @error('to_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="date-presets">
                            <button type="button" class="btn btn-outline-secondary" data-preset="this-month">This month</button>
                            <button type="button" class="btn btn-outline-secondary" data-preset="last-month">Last month</button>
                            <button type="button" class="btn btn-outline-secondary" data-preset="this-year">This year</button>
                        </div>

                        {{-- Step 2: level --}}
                        <div class="form-step mt-2">
                            <span class="form-step__num">2</span>
                            <h5>Report Level</h5>
                        </div>
                        <div class="option-group option-cards @error('report_level') is-invalid @enderror">
                            <div class="option-card">
                                <input type="radio" name="report_level" id="level_shed" value="SHED" data-label="Shed Level (Area Office + Plant)"
                                       {{ $selectedLevel === 'SHED' ? 'checked' : '' }}>
                                <label for="level_shed">
                                    <span class="option-card__radio"></span>
                                    <span>
                                        <span class="option-card__title">Shed Level</span>
                                        <span class="option-card__desc">All area offices and plants</span>
                                    </span>
                                </label>
                            </div>
                            <div class="option-card">
                                <input type="radio" name="report_level" id="level_ao" value="AREAOFFICE" data-label="Area Office Level"
                                       {{ $selectedLevel === 'AREAOFFICE' ? 'checked' : '' }}>
                                <label for="level_ao">
                                    <span class="option-card__radio"></span>
                                    <span>
                                        <span class="option-card__title">Area Office Level</span>
                                        <span class="option-card__desc">One selected area office</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                        @error('report_level')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror

                        <div class="row g-1 mt-50 d-none" id="areaOfficeContainer">
                            <div class="col-sm-6">
                                <label for="area_office_id" class="form-label">Area Office <span class="text-danger">*</span></label>
                                <select class="form-select @error('area_office_id') is-invalid @enderror" id="area_office_id" name="area_office_id">
                                    <option value="">Select area office</option>
                                    @foreach($areaOffices as $ao)
                                        <option value="{{ $ao->_id }}" {{ old('area_office_id') == $ao->_id ? 'selected' : '' }}>
                                            {{ $ao->ao_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('area_office_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Step 3: type --}}
                        <div class="form-step mt-2">
                            <span class="form-step__num">3</span>
                            <h5>Outsale Type</h5>
                        </div>
                        <div class="option-group option-cards @error('outsale_type') is-invalid @enderror">
                            <div class="option-card">
                                <input type="radio" name="outsale_type" id="type_all" value="All" data-label="All (Fresh + Rejection)"
                                       {{ $selectedType === 'All' ? 'checked' : '' }}>
                                <label for="type_all">
                                    <span class="option-card__radio"></span>
                                    <span>
                                        <span class="option-card__title">All</span>
                                        <span class="option-card__desc">Fresh and rejection</span>
                                    </span>
                                </label>
                            </div>
                            <div class="option-card">
                                <input type="radio" name="outsale_type" id="type_fresh" value="Fresh Outsale" data-label="Fresh Outsale Only"
                                       {{ $selectedType === 'Fresh Outsale' ? 'checked' : '' }}>
                                <label for="type_fresh">
                                    <span class="option-card__radio"></span>
                                    <span>
                                        <span class="option-card__title">Fresh Outsale</span>
                                        <span class="option-card__desc">Fresh milk only</span>
                                    </span>
                                </label>
                            </div>
                            <div class="option-card">
                                <input type="radio" name="outsale_type" id="type_rejection" value="Rejection" data-label="Rejection Only"
                                       {{ $selectedType === 'Rejection' ? 'checked' : '' }}>
                                <label for="type_rejection">
                                    <span class="option-card__radio"></span>
                                    <span>
                                        <span class="option-card__title">Rejection</span>
                                        <span class="option-card__desc">Rejected milk only</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                        @error('outsale_type')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Help panel --}}
                    <div class="col-lg-5 align-self-center">
                        <div class="report-info">
                            <h6><i class="fa-regular fa-circle-question me-50"></i>About this report</h6>
                            <div class="report-info__row">
                                <span class="report-info__badge report-info__badge--dispatch">DISPATCH</span>
                                <span>All outsale records with dispatch details: customer, volume, Fat, LR, SNF and Vol @ 13 TS.</span>
                            </div>
                            <div class="report-info__row">
                                <span class="report-info__badge report-info__badge--reception">RECEPTION</span>
                                <span>Completed, partial and drain records with reception volume, rate and amount. The total rate is the weighted average (amount ÷ Vol @ 13 TS).</span>
                            </div>
                            <div class="report-info__row">
                                <span class="report-info__badge report-info__badge--variance">VARIANCE</span>
                                <span>Reception − Dispatch, for gross volume and Vol @ 13 TS.</span>
                            </div>
                            <div class="report-info__row">
                                <span class="report-info__badge report-info__badge--note">NOTE</span>
                                <span>The report is generated in the background and appears under report statuses.</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="report-actions">
                    <a href="{{ route('system.reports') }}" class="btn btn-outline-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary" id="generateBtn">
                        <i class="fa-solid fa-file-excel me-50"></i> Generate Report
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('vendor-script')
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('milkOutsaleReportForm');
    const fromInput = document.getElementById('from_date');
    const toInput = document.getElementById('to_date');
    const areaOfficeContainer = document.getElementById('areaOfficeContainer');
    const areaOfficeSelect = document.getElementById('area_office_id');
    const generateBtn = document.getElementById('generateBtn');

    const checked = (name) => form.querySelector(`input[name="${name}"]:checked`);

    // Local-date formatting; toISOString() would shift the day for UTC+ timezones
    const fmt = (d) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');

    document.querySelectorAll('[data-preset]').forEach(btn => {
        btn.addEventListener('click', () => {
            const now = new Date();
            let from, to;
            if (btn.dataset.preset === 'this-month') {
                from = new Date(now.getFullYear(), now.getMonth(), 1);
                to = now;
            } else if (btn.dataset.preset === 'last-month') {
                from = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                to = new Date(now.getFullYear(), now.getMonth(), 0);
            } else {
                from = new Date(now.getFullYear(), 0, 1);
                to = now;
            }
            fromInput.value = fmt(from);
            toInput.value = fmt(to);
        });
    });

    function toggleAreaOfficeField() {
        const level = checked('report_level');
        const isAreaOffice = level && level.value === 'AREAOFFICE';
        areaOfficeContainer.classList.toggle('d-none', !isAreaOffice);
        areaOfficeSelect.required = isAreaOffice;
        if (!isAreaOffice) {
            areaOfficeSelect.value = '';
        }
    }

    form.querySelectorAll('input[name="report_level"]').forEach(r => r.addEventListener('change', toggleAreaOfficeField));
    toggleAreaOfficeField();

    const showError = (title, text) => Swal.fire({ icon: 'error', title, text,
        customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false });

    form.addEventListener('submit', function (e) {
        e.preventDefault();

        const level = checked('report_level');
        const type = checked('outsale_type');

        if (!fromInput.value || !toInput.value || !level || !type) {
            showError('Missing details', 'Please fill in all required fields.');
            return;
        }

        if (toInput.value < fromInput.value) {
            showError('Invalid period', 'To Date must be on or after From Date.');
            return;
        }

        if (level.value === 'AREAOFFICE' && !areaOfficeSelect.value) {
            showError('Area office required', 'Please select an area office for an Area Office Level report.');
            areaOfficeSelect.focus();
            return;
        }

        const escapeHtml = (s) => s.replace(/[&<>"']/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[c]));
        const areaOfficeRow = level.value === 'AREAOFFICE'
            ? `<p class="mb-50"><strong>Area Office:</strong> ${escapeHtml(areaOfficeSelect.options[areaOfficeSelect.selectedIndex].text.trim())}</p>`
            : '';

        Swal.fire({
            title: 'Generate report?',
            html: `<div style="text-align: left; font-size: .95rem;">
                        <p class="mb-50"><strong>Period:</strong> ${fromInput.value} to ${toInput.value}</p>
                        <p class="mb-50"><strong>Report Level:</strong> ${level.dataset.label}</p>
                        ${areaOfficeRow}
                        <p class="mb-1"><strong>Outsale Type:</strong> ${type.dataset.label}</p>
                        <small class="text-muted">The report is generated in the background. You will be taken to the report statuses page.</small>
                    </div>`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Generate',
            cancelButtonText: 'Cancel',
            customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-secondary ms-1' },
            buttonsStyling: false
        }).then((result) => {
            if (result.isConfirmed) {
                generateBtn.disabled = true;
                generateBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-50"></span> Generating...';
                form.submit();
            }
        });
    });
});
</script>
@endsection