<?php $this->load->view("partial/header"); ?>

<style>
.report_input_page {
    padding: 40px 24px;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f0f4ff;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.report_input_card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 20px;
    padding: 36px 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 620px;
}

.report_input_title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.report_input_subtitle {
    color: #999;
    font-size: 13px;
    margin-bottom: 28px;
}

.divider {
    height: 2px;
    background: linear-gradient(90deg, #0f3460, rgba(15,52,96,0.1));
    border-radius: 2px;
    margin-bottom: 24px;
}

.form_section {
    margin-bottom: 24px;
}

.form_section_label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: block;
}

.radio_option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.radio_option:hover {
    border-color: #0f3460;
    background: rgba(15,52,96,0.03);
}

.radio_option input[type=radio] {
    accent-color: #0f3460;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.radio_option select {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    background: white;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #333;
}

.radio_option select:focus {
    border-color: #0f3460;
    box-shadow: 0 0 0 3px rgba(15,52,96,0.12);
}

.date_range_row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.date_range_row span {
    color: #999;
    font-size: 14px;
    font-weight: 600;
}

.specific_section {
    background: rgba(15,52,96,0.05);
    border: 1px solid rgba(15,52,96,0.15);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.specific_section label {
    font-size: 12px;
    font-weight: 700;
    color: #0f3460;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: block;
}

.specific_section select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    background: white;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #333;
}

.specific_section select:focus {
    border-color: #0f3460;
    box-shadow: 0 0 0 3px rgba(15,52,96,0.12);
}

.export_section {
    background: rgba(46,125,50,0.05);
    border: 1px solid rgba(46,125,50,0.15);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 24px;
}

.export_label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
    display: block;
}

.export_options {
    display: flex;
    gap: 20px;
}

.export_option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.export_option input[type=radio] {
    accent-color: #2e7d32;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.submit_btn {
    background: linear-gradient(135deg, #0f3460, #16213e);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15,52,96,0.4);
    transition: all 0.2s;
    width: 100%;
    letter-spacing: 0.3px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.submit_btn:hover {
    background: linear-gradient(135deg, #1a4a7a, #0f3460);
    box-shadow: 0 6px 20px rgba(15,52,96,0.5);
    transform: translateY(-1px);
}

.back_link {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: #999;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.back_link:hover { color: #0f3460; text-decoration: none; }
</style>

<div class="report_input_page">
    <div class="report_input_card">

        <div class="report_input_title">
            🔍 <?php echo $this->lang->line('reports_report_input'); ?>
        </div>
        <div class="report_input_subtitle">Select a date range and filter to generate your detailed report</div>
        <div class="divider"></div>

        <?php if(isset($error)): ?>
        <div style="background:rgba(220,53,69,0.08);border:1px solid rgba(220,53,69,0.2);border-radius:8px;padding:10px 14px;color:#dc3545;font-size:13px;margin-bottom:20px;">
            <?php echo $error; ?>
        </div>
        <?php endif; ?>

        <!-- Date Range -->
        <div class="form_section">
            <span class="form_section_label"><?php echo $this->lang->line('reports_date_range'); ?></span>

            <div class="radio_option">
                <input type="radio" name="report_type" id="simple_radio" value="simple" checked="checked" />
                <?php echo form_dropdown('report_date_range_simple', $report_date_range_simple, '', 'id="report_date_range_simple"'); ?>
            </div>

            <div class="radio_option">
                <input type="radio" name="report_type" id="complex_radio" value="complex" />
                <div class="date_range_row">
                    <?php echo form_dropdown('start_month', $months, $selected_month, 'id="start_month"'); ?>
                    <?php echo form_dropdown('start_day', $days, $selected_day, 'id="start_day"'); ?>
                    <?php echo form_dropdown('start_year', $years, $selected_year, 'id="start_year"'); ?>
                    <span>—</span>
                    <?php echo form_dropdown('end_month', $months, $selected_month, 'id="end_month"'); ?>
                    <?php echo form_dropdown('end_day', $days, $selected_day, 'id="end_day"'); ?>
                    <?php echo form_dropdown('end_year', $years, $selected_year, 'id="end_year"'); ?>
                </div>
            </div>
        </div>

        <!-- Specific Filter -->
        <div class="specific_section">
            <label>🎯 <?php echo $specific_input_name; ?></label>
            <?php echo form_dropdown('specific_input_data', $specific_input_data, '', 'id="specific_input_data"'); ?>
        </div>

        <!-- Export -->
        <div class="export_section">
            <span class="export_label">📊 Export to Excel?</span>
            <div class="export_options">
                <label class="export_option">
                    <input type="radio" name="export_excel" id="export_excel_yes" value="1" />
                    Yes — download as Excel
                </label>
                <label class="export_option">
                    <input type="radio" name="export_excel" id="export_excel_no" value="0" checked="checked" />
                    No — view in browser
                </label>
            </div>
        </div>

        <!-- Submit -->
        <button type="button" id="generate_report" class="submit_btn">
            🔍 <?php echo $this->lang->line('common_submit'); ?>
        </button>

        <a href="<?php echo site_url('reports'); ?>" class="back_link">← Back to Reports</a>

    </div>
</div>

<?php $this->load->view("partial/footer"); ?>

<script type="text/javascript">
$(document).ready(function()
{
    $("#generate_report").click(function()
    {
        var export_excel = 0;
        if($("#export_excel_yes").is(':checked'))
        {
            export_excel = 1;
        }

        if($("#simple_radio").is(':checked'))
        {
            window.location = window.location + '/' + $("#report_date_range_simple option:selected").val()
                + '/' + $('#specific_input_data').val() + '/' + export_excel;
        }
        else
        {
            var start_date = $("#start_year").val() + '-' + $("#start_month").val() + '-' + $('#start_day').val();
            var end_date = $("#end_year").val() + '-' + $("#end_month").val() + '-' + $('#end_day').val();
            window.location = window.location + '/' + start_date + '/' + end_date
                + '/' + $('#specific_input_data').val() + '/' + export_excel;
        }
    });

    $("#start_month, #start_day, #start_year, #end_month, #end_day, #end_year").click(function()
    {
        $("#complex_radio").prop('checked', true);
    });

    $("#report_date_range_simple").click(function()
    {
        $("#simple_radio").prop('checked', true);
    });
});
</script>