@extends('operations.layout.mainlayout')

@section('content')
<!-- jQuery -->
<script src="/js/jquery-3.6.0.min.js"></script>
<!-- Select2 JS -->
<script src="/bower_components/admin-lte/plugins/select2/js/select2.full.min.js"></script>
<style>
    .select2-container--default .select2-selection--multiple .select2-selection__choice__display{
        color:black;
    }
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Questionnaire Report</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">

                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">

                    <!-- /.card -->
                    <div class="col-12 col-sm-12 col-md-12">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-order" role="alert" id="error-alert" style="@if(empty($error))display: none;@endif">@if(!empty($error)){{$error}}@endif</div>
                            </div>
                        </div>
                        <br />
                        <div class="card bg-light">
                            <div class="card-header text-muted border-bottom-0">
                            </div>
                            <form method="get" action="" id="filter-form" style="width:100%;">
                                <div class="card-body pt-0">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <span class="text-muted text-sm"><b>Registration Date From</b></span>
                                                    <input type="date" class="form-control" name="registration_date_from" value="@if(!empty($registration_date_from)){{$registration_date_from}}@endif" />
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="text-muted text-sm"><b>Registration Date To</b></span>
                                                    <input type="date" class="form-control" name="registration_date_to" value="@if(!empty($registration_date_to)){{$registration_date_to}}@endif" />
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="text-muted text-sm"><b>Processing Branch</b></span>
                                                    <select class="form-control select2" name="processing_branch" id="processing-branch-select">
                                                        <option value="">Select Branch</option>
                                                        @foreach($processingBranches ?? [] as $branch)
                                                            <option @if(!empty($selected_branch) && $selected_branch == $branch->ID) selected @endif value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="text-muted text-sm"><b>Processing Unit</b></span>
                                                    <select class="form-control select2" name="processing_unit" id="processing-unit-select">
                                                        <option value="">Select Unit</option>
                                                        @foreach($processingUnits ?? [] as $unit)
                                                            <option @if(!empty($selected_unit) && $selected_unit == $unit->ID) selected @endif value="{{$unit->ID}}">{{$unit->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="text-muted text-sm"><b>Test</b></span>
                                                    <select class="form-control select2" name="test" id="test-select">
                                                        <option value="">Select Test</option>
                                                        @foreach($tests ?? [] as $test)
                                                            <option @if(!empty($selected_test) && $selected_test == $test->ID) selected @endif value="{{$test->ID}}">{{$test->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="text-muted text-sm"><b>Questionnaire</b></span>
                                                    <select class="form-control select2" name="questionnaire" id="questionnaire-select">
                                                        <option value="">Select Questionnaire</option>
                                                        @foreach($questionnaires ?? [] as $questionnaire)
                                                            <option @if(!empty($selected_questionnaire) && $selected_questionnaire == $questionnaire->ID) selected @endif value="{{$questionnaire->ID}}">{{$questionnaire->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="text-right">
                                        <button type="button" class="btn btn-sm btn-success" id="export-btn">
                                            <i class="fas fa-file-excel"></i> Export Excel
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    @if(!empty($results))
                    <div class="card">
                        <div class="card-body">
                            <table id="questionnaire-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Registration Date</th>
                                    <th>Branch</th>
                                    <th>Unit</th>
                                    <th>Test/Questionnaire</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($results as $result)
                                    <tr>
                                        <td>{{$result->registration_date}}</td>
                                        <td>{{$result->branch_name}}</td>
                                        <td>{{$result->unit_name}}</td>
                                        <td>{{$result->test_name ?? $result->questionnaire_name}}</td>
                                        <td>{{$result->status}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif

                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<script>
$(document).ready(function() {
    // Mutual exclusivity for Test and Questionnaire using Select2 methods
    $('#test-select').on('change', function() {
        if ($(this).val()) {
            $('#questionnaire-select').prop('disabled', true).trigger('change.select2');
        } else {
            $('#questionnaire-select').prop('disabled', false).trigger('change.select2');
        }
    });

    $('#questionnaire-select').on('change', function() {
        if ($(this).val()) {
            $('#test-select').prop('disabled', true).trigger('change.select2');
        } else {
            $('#test-select').prop('disabled', false).trigger('change.select2');
        }
    });

    // On form submit, check for mutual exclusivity
    $('#filter-form').submit(function(e) {
        var testVal = $('#test-select').val();
        var questionnaireVal = $('#questionnaire-select').val();
        if (testVal && questionnaireVal) {
            e.preventDefault();
            $('#error-alert').text('Please select either Test or Questionnaire, not both.').show();
            return false;
        }
        $('#error-alert').hide();
    });

    // Export button
    $('#export-btn').click(function() {
        var formData = $('#filter-form').serialize();
        var url = '/operations/questionnaire-report/export?' + formData;

        var $btn = $(this);
        var originalText = $btn.html();
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Exporting...');

        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        
        xhr.onload = function() {
            if (xhr.status === 200) {
                var blob = xhr.response;
                
                if (blob.type === 'application/json') {
                    var reader = new FileReader();
                    reader.onload = function() {
                        var response = JSON.parse(reader.result);
                        $('#error-alert').text(response.message || 'Export failed').show();
                        setTimeout(function() {
                            $('#error-alert').fadeOut();
                        }, 5000);
                        $btn.prop('disabled', false).html(originalText);
                    };
                    reader.readAsText(blob);
                } else {
                    var downloadUrl = window.URL.createObjectURL(blob);
                    var filename = 'questionnaire_report.xlsx';
                    
                    var disposition = xhr.getResponseHeader('Content-Disposition');
                    if (disposition && disposition.indexOf('attachment') !== -1) {
                        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        var matches = filenameRegex.exec(disposition);
                        if (matches != null && matches[1]) {
                            filename = matches[1].replace(/['"]/g, '');
                        }
                    }
                    
                    var link = document.createElement('a');
                    link.href = downloadUrl;
                    link.download = filename;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(downloadUrl);
                    
                    $btn.prop('disabled', false).html(originalText);
                }
            } else {
                $btn.prop('disabled', false).html(originalText);
                $('#error-alert').text('Export failed').show();
                setTimeout(function() {
                    $('#error-alert').fadeOut();
                }, 5000);
            }
        };
        
        xhr.onerror = function() {
            $btn.prop('disabled', false).html(originalText);
            $('#error-alert').text('Export failed').show();
            setTimeout(function() {
                $('#error-alert').fadeOut();
            }, 5000);
        };
        
        xhr.send();
    });

    // Initialize Select2 with comprehensive configuration
    $('#processing-branch-select').select2({
        placeholder: 'Search for a branch...',
        allowClear: true,
        minimumInputLength: -1
    });

    $('#processing-unit-select').select2({
        placeholder: 'Search for a unit...',
        allowClear: true,
        minimumInputLength: -1
    });

    $('#test-select').select2({
        placeholder: 'Search for a test...',
        allowClear: true,
        minimumInputLength: -1
    });

    $('#questionnaire-select').select2({
        placeholder: 'Search for a questionnaire...',
        allowClear: true,
        minimumInputLength: -1
    });
});
</script>

@endsection