@extends('layout.layout')
@section('title', 'Reports')
@section('report', 'active')
@section('layout.css')
    <style>
        .select2-choices {
            min-height: 150px;
            max-height: 150px;
            overflow-y: auto;
        }

        .select2-selection__rendered {
            max-height: 150px;
            overflow: auto;
        }
    </style>
@endsection

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h5>Reports</h5>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="callout callout-info">
                <form id="form">
                    @csrf
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="">Report Type</label>
                            <select class="form-control single-select2" id="report_type" name="report_type"
                                style="width: 100%" required>
                                <option value="business_unit" selected>Report by Business Unit</option>
                                <option value="ticket_owner">Report by Ticket Owner</option>
                                <option value="resource">Report by Resource</option>
                                <option value="ticket_activity">Ticket Activity Log</option>
                                <option value="project_registry">Project Registry Report</option>
                                @if (Auth::user()->is_admin === 1)
                                    <option value="entity_sharing_by_resource">Entity Sharing By Resource</option>
                                @endif
                                <option value="work_load">Work Load Log</option>
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="">Start</label>
                            <input type="date" class="form-control" id="start" name="start"
                                value="{{ date('Y-m-01') }}" max="2025-08-25" required>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="">End</label>
                            <input type="date" class="form-control" id="end" name="end"
                                value="{{ date('Y-m-d') }}" max="2025-08-25" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-3 report_div" id="resource_div" style="display: none">
                            <label for="">Resource</label>
                            <select class="form-control select2 multi-select" multiple="multiple" id="resource"
                                name="resource" data-placeholder="Select Resource" style="width: 100%;">
                            </select>
                        </div>
                        <div class="form-group col-md-3 report_div" id="resource_opt_div" style="display: none">
                            <label for="">Resource</label>
                            <select class="form-control select2 " id="resource_opt" name="resource"
                                data-placeholder="Select Resource" style="width: 100%;">
                            </select>
                        </div>
                        <div class="form-group col-md-3 report_div" id="business_unit_multi_div" style="display: none">
                            <label for="">Business Unit</label>
                            <select class="form-control select2 multi-select" multiple="multiple" id="business_unit_multi"
                                name="business_unit_multi" data-placeholder="Select Business Unit" style="width: 100%;">
                            </select>
                        </div>
                        <div class="form-group col-md-3 report_div" id="ticket_manager_multi_div" style="display: none">
                            <label for="">Ticket Manager</label>
                            <select class="form-control select2 multi-select" multiple="multiple" id="ticket_manager_multi"
                                name="ticket_manager_multi" data-placeholder="Select Ticket Manager" style="width: 100%;"
                                required></select>
                        </div>
                        <div class="form-group col-md-3 report_div" id="business_unit_div">
                            <label for="">Business Unit</label>
                            {{-- <input type="" class="form-control" id="business_unit"> --}}
                            <select class="form-control select2 single-select" id="business_unit" name="business_unit_id"
                                style="width: 100%;" required></select>
                        </div>
                        <div class="form-group col-md-3 report_div" id="ticket_manager_div" style="display: none">
                            <label for="">Ticket Manager</label>
                            {{--                        <input type="" class="form-control" id="ticket_manager"> --}}
                            <select class="form-control select2 single-select" id="ticket_manager" name="ticket_manager"
                                style="width: 100%;" required></select>
                        </div>
                        <div class="form-group col-md-3 report_div" id="entities_div">
                            <label for="">Entity</label>
                            <select class="form-control select2 single-select" id="entities" name="entities_id"
                                style="width: 100%;" required></select>
                        </div>
                        <div class="form-group col-md-3 report_div" id="brand_div">
                            <label for="">Brand</label>
                            <select class="form-control select2" id="brand" name="brand_id" style="width: 100%;"
                                required>
                                <option value="all">Select All</option>
                            </select>
                        </div>
                        <div class="form-group col-md-3 report_div" id="status_div">
                            <label for="">Status</label>
                            <select class="form-control select2 single-select" id="status" name="status_id"
                                style="width: 100%;" required></select>
                        </div>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="non_billable" name="non_billable"
                            value="0" checked>
                        <label class="form-check-label">
                            Include Non-Billable &nbsp;
                        </label>
                    </div>
                    <div class="form-check report_div" id="admin_div" style="display: none">
                        <input class="form-check-input" type="checkbox" id="admin" name="admin" value="0" checked>
                        <label class="form-check-label">
                            Include Admin Task &nbsp;
                        </label>
                    </div>
                    {{-- <h6 for="" class=mt-2>Load option</h6> --}}

                    <hr>
                    <div class="flex-sm-row-reverse">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="load_report" id="load_report"
                                value="table" checked>
                            <label class="form-check-label">
                                View into Table &nbsp;
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="load_report" id="load_report"
                                value="pdf">
                            <label class="form-check-label">
                                Download PDF &nbsp;
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="load_report" id="load_report"
                                value="csv">
                            <label class="form-check-label">
                                Download CSV &nbsp;
                            </label>
                        </div>
                        <div class="form-check" id="payslip_check" style="display: none">
                            <input class="form-check-input" type="radio" name="load_report" id="load_report"
                                value="payslip_view">
                            <label class="form-check-label">
                                Create Invoice
                            </label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <span class="btn btn-sm btn-primary btn-flat mt-2" id="submit_button">
                                <div class="spinner-border spinner-border-sm" role="status" id="button_spinner"
                                    style="display: none">
                                    <i class="sr-only">Loading...</i>
                                </div>
                                <i class="fas fa-spinner mt"></i> Generate
                            </span>
                            <span type="button" class="btn btn-sm btn-danger btn-flat mt-2" id="resetBtn">
                                <i class="fas fa-redo mt"></i> Reset
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card card-cyan">
                <div class="card-header">
                    <i class="fa fa-file"></i> Report
                </div>
                <div class="card-body" id="datatable_container" style="overflow-y: hidden">
                    <table id="datatable" class="table table-bordered" style="width: 100%">
                        <thead id="datatable_head">
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                        </thead>
                        <tbody id="datatable_body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $('#datatable').DataTable({
            search: false,
            "paging": false,
            "ordering": false,
            "info": false
        })

        $('.select2').select2({
            maximumSelectionLength: 0,
            selectOnClose: true,
        })

        $('.single-select2').select2({
            maximumSelectionLength: 0,
            selectOnClose: true,
        })
    </script>

    @include('report.script')
@endsection