@extends('layouts/contentLayoutMaster')

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

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Milk Outsale Report</h4>
                    <p class="text-muted">Fresh Milk & Rejection Outsale Report with Dispatch, Reception & Variance</p>
                </div>
                <div class="card-body">
                    <form id="milkOutsaleReportForm" action="{{ route('generate.system.report', 'MILK_OUTSALE_REPORT') }}" method="POST">
                        @csrf

                        <!-- Date Filters -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <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')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <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')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Report Level -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="report_level" class="form-label">Report Level <span class="text-danger">*</span></label>
                                    <select class="form-control @error('report_level') is-invalid @enderror"
                                            id="report_level" name="report_level" required onchange="toggleAreaOfficeField()">
                                        <option value="">Select Report Level</option>
                                        <option value="AREAOFFICE" {{ old('report_level') == 'AREAOFFICE' ? 'selected' : '' }}>
                                            Area Office Level
                                        </option>
                                        <option value="SHED" {{ old('report_level') == 'SHED' ? 'selected' : '' }}>
                                            Shed Level (Area Office + Plant)
                                        </option>
                                    </select>
                                    @error('report_level')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6" id="areaOfficeContainer" style="display: none;">
                                <div class="mb-3">
                                    <label for="area_office_id" class="form-label">Area Office <span class="text-danger">*</span></label>
                                    <select class="form-control @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')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Outsale Type -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="outsale_type" class="form-label">Outsale Type <span class="text-danger">*</span></label>
                                    <select class="form-control @error('outsale_type') is-invalid @enderror"
                                            id="outsale_type" name="outsale_type" required>
                                        <option value="">Select Outsale Type</option>
                                        <option value="All" {{ old('outsale_type') == 'All' ? 'selected' : '' }}>
                                            All (Fresh + Rejection)
                                        </option>
                                        <option value="Fresh Outsale" {{ old('outsale_type') == 'Fresh Outsale' ? 'selected' : '' }}>
                                            Fresh Outsale Only
                                        </option>
                                        <option value="Rejection" {{ old('outsale_type') == 'Rejection' ? 'selected' : '' }}>
                                            Rejection Only
                                        </option>
                                    </select>
                                    @error('outsale_type')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Report Info -->
                        <div class="alert alert-info" role="alert">
                            <h6>Report Sections:</h6>
                            <ul class="mb-0">
                                <li><strong>Section 1 (Dispatch):</strong> All outsale records with dispatch data</li>
                                <li><strong>Section 2 (Reception):</strong> Completed/Partial/Drain records with reception data</li>
                                <li><strong>Section 3 (Variance):</strong> Calculated differences (Dispatch - Reception)</li>
                            </ul>
                        </div>

                        <!-- Buttons -->
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-play-circle"></i> Generate Report
                            </button>
                            <a href="{{ route('system.reports') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Reports
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleAreaOfficeField() {
    const reportLevel = document.getElementById('report_level').value;
    const areaOfficeContainer = document.getElementById('areaOfficeContainer');
    const areaOfficeSelect = document.getElementById('area_office_id');

    if (reportLevel === 'AREAOFFICE') {
        // Show and make required for Area Office Level
        areaOfficeContainer.style.display = 'block';
        areaOfficeSelect.setAttribute('required', 'required');
    } else {
        // Hide for Shed Level and by default
        areaOfficeContainer.style.display = 'none';
        areaOfficeSelect.removeAttribute('required');
        areaOfficeSelect.value = '';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleAreaOfficeField();
});

// Form submission with confirmation
document.getElementById('milkOutsaleReportForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const reportLevel = document.getElementById('report_level').value;
    const areaOfficeSelect = document.getElementById('area_office_id');
    const fromDate = document.getElementById('from_date').value;
    const toDate = document.getElementById('to_date').value;
    const outsaleType = document.getElementById('outsale_type').value;

    // Validate required fields
    if (!reportLevel) {
        Swal.fire('Error', 'Report Level is required', 'error');
        return false;
    }

    if (reportLevel === 'AREAOFFICE' && !areaOfficeSelect.value) {
        Swal.fire('Error', 'Area Office is required for Area Office Level report', 'error');
        areaOfficeSelect.focus();
        return false;
    }

    if (!fromDate || !toDate || !outsaleType) {
        Swal.fire('Error', 'All fields are required', 'error');
        return false;
    }

    // Show confirmation modal
    const areaOfficeText = areaOfficeSelect.value ?
        ' - Area Office: ' + areaOfficeSelect.options[areaOfficeSelect.selectedIndex].text : '';

    Swal.fire({
        title: 'Generate Report?',
        html: `<div style="text-align: left;">
                    <p><strong>Period:</strong> ${fromDate} to ${toDate}</p>
                    <p><strong>Report Level:</strong> ${reportLevel}</p>
                    ${areaOfficeText ? '<p><strong>Area Office:</strong> ' + areaOfficeSelect.options[areaOfficeSelect.selectedIndex].text + '</p>' : ''}
                    <p><strong>Outsale Type:</strong> ${outsaleType}</p>
                    <p style="margin-top: 15px; color: #666;"><em>This will generate the report in the background. You will be notified when it's ready.</em></p>
                </div>`,
        icon: 'info',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, Generate Report',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            // Submit the form
            document.getElementById('milkOutsaleReportForm').submit();
        }
    });
});
</script>

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