@extends('layouts.master')
@section('title', 'Reports')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        
        @section('breadcrumbs')
        <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
            <ol class="breadcrumb mb-0 me-1">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                </li>
                <li class="breadcrumb-item active">
                    Reports
                </li>

            </ol>
        </nav>
       @endsection
        
        <form method="POST" action="" accept-charset="UTF-8" class="form-horizontal" id="filterData" name="filterData"
            novalidate="novalidate">
            @csrf
            <div class="col-xl-12 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 col-lg-3 col-sm-4 col-6">
                                <div class="form-check custom-option custom-option-basic">
                                    <label class="form-check-label custom-option-content" for="taskreport">
                                        <input name="reporttype" class="form-check-input" type="radio" value="1"
                                            id="taskreport" checked />
                                        <span class="custom-option-header">
                                            <span class="h6 mb-0">Task Report</span>
                                        </span>

                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3 col-lg-3 col-sm-4 col-6">
                                <div class="form-check custom-option custom-option-basic">
                                    <label class="form-check-label custom-option-content" for="salesleadreport">
                                        <input name="reporttype" class="form-check-input" type="radio" value="2"
                                            id="salesleadreport" />
                                        <span class="custom-option-header">
                                            <span class="h6 mb-0">Sales Lead Report</span>
                                        </span>

                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3 col-lg-3 col-sm-4 col-6">
                                <div class="form-check custom-option custom-option-basic">
                                    <label class="form-check-label custom-option-content" for="ticketreport">
                                        <input name="reporttype" class="form-check-input" type="radio" value="3"
                                            id="ticketreport" />
                                        <span class="custom-option-header">
                                            <span class="h6 mb-0">Ticket Report</span>
                                        </span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3 col-sm-4 col-6">
                                <div class="form-check custom-option custom-option-basic">
                                    <label class="form-check-label custom-option-content" for="clockinoutreport">
                                        <input name="reporttype" class="form-check-input" type="radio" value="4"
                                            id="clockinoutreport" />
                                        <span class="custom-option-header">
                                            <span class="h6 mb-0">Clock In-Out Report</span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-4">
                <div class="card-header border-bottom">
                    <h5 class="card-title mb-3">Search Filter</h5>
                    <div class="row">
                        <div class="d-flex  align-items-center row pb-2 ">
                            <div class="col-lg-3 col-md-4 col-6 task">

                                <select class="form-select" id="taskstatus" name="taskstatus">
                                    <option value="">Select Status</option>
                                    @foreach ($taskStatus as $key => $value)
                                        <option value="{{ $key }}"> {{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6 saleslead d-none">

                                <select class="form-select" id="salesleadstatus" name="salesleadstatus">
                                    <option value="">Select Status</option>
                                    @foreach ($salesLeadStatus as $key => $value)
                                        <option value="{{ $key }}"> {{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6 ticket d-none">

                                <select class="form-select" id="ticketstatus" name="ticketstatus">
                                    <option value="">Select Status</option>
                                    @foreach ($ticketStatus as $key => $value)
                                        <option value="{{ $key }}"> {{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">

                                <input type="text" class="form-control flatpickr-validation" name="start_date"
                                    id="start_date" placeholder="Start Date">
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">

                                <input type="text" class="form-control flatpickr-validation" name="end_date"
                                    id="end_date" placeholder="End Date">
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                                <select class="form-select select2" id="assign" name="assign" data-allow-clear="true">
                                    <option value="">Select Assign</option>
                                    @foreach ($assigne as $key => $value)
                                        <option value="{{ $value->id }}"> {{ $value->ownerName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            
                            
                        </div>
                    </div>
                    <div class="mt-2">
                    <button id="reportfilter" type="submit" class="btn btn-primary btn-sm "><i class="ti ti-download fa-2x me-1 mb-1"></i> Download</button>
                                <button id="filteroptionreset" type="button" class="btn btn-secondary">Reset</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            /* Initialize Select2 */
            const select2 = $('.select2');
            if (select2.length) {
                select2.each(function() {
                    var $this = $(this);
                    let assignedPlaceHolder = 'Select Assigned To';
                    $this.wrap('<div class="position-relative"></div>').select2({
                        placeholder: assignedPlaceHolder,
                        dropdownParent: $this.parent()
                    });
                });
            }
            const startDate = [].slice.call(document.querySelectorAll('.flatpickr-validation'));
            // Flat pickr
            if (startDate) {
                startDate.forEach(flatPickr => {
                    flatPickr.flatpickr({
                        allowInput: true,
                        monthSelectorType: 'static',
                        dateFormat: "{{ config('const.displayDate') }}",
                    });
                });
            }
            const endDate = [].slice.call(document.querySelectorAll('.flatpickr-validation'));
            // Flat pickr
            if (endDate) {
                endDate.forEach(flatPickr => {
                    flatPickr.flatpickr({
                        allowInput: true,
                        monthSelectorType: 'static',
                        dateFormat: "{{ config('const.displayDate') }}",
                    });
                });
            }

            /** Hide Show Status ReportType Wise */
            $("input[name='reporttype']").change(function() {
                resetData();
                var reportType = $(this).val();
                if (reportType == 1) {
                    $(".task").removeClass('d-none');
                    $(".saleslead").addClass('d-none');
                    $(".ticket").addClass('d-none');
                }
                if (reportType == 2) {
                    $(".task").addClass('d-none');
                    $(".saleslead").removeClass('d-none');
                    $(".ticket").addClass('d-none');
                }
                if (reportType == 3) {
                    $(".task").addClass('d-none');
                    $(".saleslead").addClass('d-none');
                    $(".ticket").removeClass('d-none');
                }

                if (reportType == 4) {
                    $(".task").addClass('d-none');
                    $(".saleslead").addClass('d-none');
                    $(".ticket").addClass('d-none');
                    $('.select2-selection__placeholder').text('Select User')
                    
                }
            });


            /* Reset Fillter Option */
            $('#filteroptionreset').on("click", function() {
                $("#filterData")[0].reset();
                $("#taskstatus").val('');
                $('#taskstatus').trigger('change');
                $("#salesleadstatus").val('');
                $('#salesleadstatus').trigger('change');
                $("#ticketstatus").val('');
                $('#ticketstatus').trigger('change');
                $("#assign").val('');
                $('#assign').trigger('change');
                $("#taskreport").attr('checked', true).trigger('click');
                $(".task").removeClass('d-none');
                $(".saleslead").addClass('d-none');
                $(".ticket").addClass('d-none');

            });
            
            function resetData(){
                $("#start_date").val('');
                $("#end_date").val('');
                $("#taskstatus").val('');
                $('#taskstatus').trigger('change');
                $("#salesleadstatus").val('');
                $('#salesleadstatus').trigger('change');
                $("#ticketstatus").val('');
                $('#ticketstatus').trigger('change');
                $("#assign").val('');
                $('#assign').trigger('change');
                
            }
        });
    </script>
@endsection