@extends('layouts.app')
<style>
    .surveyTable table {
      border-collapse: collapse;
      border: 1px solid black;
      width: 100%;
      background-color: white
    }
    
    .surveyTable th, td {
      text-align: left;
      padding: 8px;
    }
    .surveyTable th, td {
  border: 1px solid black;
  border-collapse: collapse;
  @if(app()->getLocale() == "ar")
text-align: right;
  @endif
}
    .surveyTable tr:nth-child(even){background-color: #f2f2f2}
    
    .surveyTable th {
      background-color: #0098A7;
      color: white;
    }

    .surveyTable tr:nth-child(odd) {
  background-color: #ffffff;
}
    </style>
@push('datatable-styles')
<script src="{{ asset('vendor/jquery/frappe-charts.min.iife.js') }}"></script>
<script src="{{ asset('vendor/jquery/Chart.min.js') }}"></script>
@include('sections.datatable_css')
@endpush

@section('filter-section')

<x-filters.filter-box>

    <!-- RESET START -->
    <div class="select-box d-flex py-1 px-lg-2 px-md-2 px-0">
        <x-forms.button-secondary class="btn-xs d-none" id="reset-filters" icon="times-circle">
            @lang('app.clearFilters')
        </x-forms.button-secondary>
    </div>
    <!-- RESET END -->

    <!-- MORE FILTERS START -->
    <x-filters.more-filter-box>
        <div class="more-filter-items">
            <label class="f-14 text-dark-grey mb-12 text-capitalize" for="min">@lang('app.date_from')</label>
            <div class="select-filter mb-4">
                <div class="select-status d-flex">
                    <input type="date"
                        class="position-relative text-dark form-control border-5 p-2 text-left f-14 f-w-500 border-additional-grey"
                        id="date_from" name="date_from">
                </div>
            </div>
        </div>
        <div class="more-filter-items">
            <label class="f-14 text-dark-grey mb-12 text-capitalize" for="min">@lang('app.date_to')</label>
            <div class="select-filter mb-4">
                <div class="select-status d-flex">
                    <input type="date"
                        class="position-relative text-dark form-control border-5 p-2 text-left f-14 f-w-500 border-additional-grey"
                        id="date_to" name="date_to">
                </div>
            </div>
        </div>

        <div class="more-filter-items">
            <label class="f-14 text-dark-grey mb-12 text-capitalize" for="usr">@lang('app.answer')</label>
            <div class="select-filter mb-4">
                <div class="select-others">
                    <select class="form-control select-picker" name="survey_status" id="survey_status">
                        <option value="all">@lang('app.all')</option>
                        @foreach ($surveyStatus as $status)
                        <option value="{{ $status->id }}">{{ mb_ucwords($status->status_en) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="more-filter-items">
            <label class="f-14 text-dark-grey mb-12 text-capitalize" for="usr">@lang('app.choose_doctor')</label>
            <div class="select-filter mb-4">
                <div class="select-others">
                    <select class="form-control select-picker" id="doctor" data-live-search="true" data-container="body"
                        data-size="8">
                        <option value="all">@lang('app.all')</option>
                        @if(app()->getLocale() === 'ar')
                        @foreach ($doctors as $doctor)
                        <option value="{{ $doctor->id }}">{{ $doctor->name_ar }}</option>
                        @endforeach
                        @else
                        @foreach ($doctors as $doctor)
                        <option value="{{ $doctor->id }}">{{ $doctor->name_en }}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
            </div>
        </div>
        <div class="more-filter-items">
            <label class="f-14 text-dark-grey mb-12 text-capitalize" for="usr">@lang('app.choose_survey')</label>
            <div class="select-filter mb-4">
                <div class="select-others">
                    <select class="form-control select-picker" id="surveys" data-live-search="true"
                        data-container="body" data-size="8">
                        <option value="all">@lang('app.all')</option>
                        @if(app()->getLocale() === 'ar')
                        @foreach ($surveys as $survey)
                        <option value="{{ $survey->id }}">{{ $survey->name_ar }}</option>
                        @endforeach
                        @else
                        @foreach ($surveys as $survey)
                        <option value="{{ $survey->id }}">{{ $survey->name_en }}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
            </div>
        </div>


        <div class="more-filter-items">
            <label class="f-14 text-dark-grey mb-12 text-capitalize" for="usr">@lang('app.choose_question')</label>
            <div class="select-filter mb-4">
                <div class="select-others">
                    <select class="form-control select-picker" id="questions" data-live-search="true"
                        data-container="body" data-size="8">
                        <option value="all">@lang('app.all')</option>
                        @if(app()->getLocale() === 'ar')
                        @foreach ($questions as $question)
                        <option value="{{ $question->id }}">{{ $question->name_ar }}</option>
                        @endforeach
                        @else
                        @foreach ($questions as $question)
                        <option value="{{ $question->id }}">{{ $question->name_en }}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
            </div>
        </div>

        <div class="more-filter-items">
            <label class="f-14 text-dark-grey mb-12 text-capitalize" for="usr">@lang('app.choose_title')</label>
            <div class="select-filter mb-4">
                <div class="select-others">
                    <select class="form-control select-picker" id="titles" data-live-search="true" data-container="body"
                        data-size="8">
                        <option value="all">@lang('app.all')</option>
                        @if(app()->getLocale() === 'ar')
                        @foreach ($questionTitles as $title)
                        <option value="{{ $title->id }}">{{ $title->title_ar }}</option>
                        @endforeach
                        @else
                        @foreach ($questionTitles as $title)
                        <option value="{{ $title->id }}">{{ $title->title_en }}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
            </div>
        </div>

    </x-filters.more-filter-box>
    <!-- MORE FILTERS END -->
</x-filters.filter-box>

@endsection

@section('content')
<!-- CONTENT WRAPPER START -->
<div class="content-wrapper">
    <!-- Add Task Export Buttons Start -->

    <div class="d-flex flex-column">
        <!-- TASK STATUS START -->
        <div class="row">
            <div class="col-lg-6">

                <x-cards.data id="survey-chart-card" :title="__('app.menu.surveys')" padding="false">
                </x-cards.data>
            </div>
            <div class="col-lg-6">
 
                <x-cards.data id="survey-satisfaction-chart-card" :title="__('app.menu.surveys')" padding="false">
                </x-cards.data>
            </div>
        </div>
        <!-- TASK STATUS END -->
<br><br>
        <table class="surveyTable" id="surveyTable">
            <tr>
              <th> @lang('app.survey_name')</th>
              <th> @lang('app.date_from')</th>
              <th> @lang('app.date_to')</th>
              <th> @lang('app.satisfaction_number')</th>
              <th> @lang('app.unsatisfaction_number')</th>
              <th> @lang('app.satisfaction_rate')</th>
            </tr>
            {{-- <tr>
              <td>Peter</td>
              <td>Griffin</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>Lois</td>
              <td>Griffin</td>
              <td>$150</td>
            </tr>
            <tr>
              <td>Joe</td>
              <td>Swanson</td>
              <td>$300</td>
            </tr>
            <tr>
              <td>Cleveland</td>
              <td>Brown</td>
              <td>$250</td>
          </tr> --}}
          </table>
<div class="row">
    <div id="table-actions" class="flex-grow-1 align-items-center mt-4">
    </div>

    <div style="margin-top: 25px">
            <x-forms.link-primary :link="route('survey-questions-report')" class="mr-3 float-left mb-2 mb-lg-0 mb-md-0" icon="question-circle">
                @lang('app.questions-report')
            </x-forms.link-primary>
    </div>
</div>
    

    </div>

    <!-- Add Task Export Buttons End -->
    <!-- Task Box Start -->
    <div class="d-flex flex-column w-tables rounded mt-4 bg-white">
        {!! $dataTable->table(['class' => 'table table-hover border-0 w-100']) !!}


    </div>
    <!-- Task Box End -->
</div>


<!-- CONTENT WRAPPER END -->

@endsection

@push('scripts')
@include('sections.datatable_js')

<script>

</script>
<script>
    $('#all-surveys-table').on('preXhr.dt', function(e, settings, data) {

            var dateFrom = $('#date_from').val();
            var dateTo = $('#date_to').val();
            var doctor = $('#doctor').val();
            var title = $('#titles').val();
            var survey = $('#surveys').val();
            var question = $('#questions').val();
            var survey_status = $('#survey_status').val();

            data['date_from'] = dateFrom;
            data['date_to'] = dateTo;
            data['doctor'] = doctor;
            data['title'] = title;
            data['survey'] = survey;
            data['question'] = question;
            data['survey_status'] = survey_status;
        });
        const showTable = () => {
            window.LaravelDataTables["all-surveys-table"].draw(false);
            pieChart();
            pieSatisfactionChart();
        }



        $('#status, #date_from, #date_to,#survey_status, #doctor, #titles, #surveys, #questions')
            .on('change keyup',
                function() {

                     if ($('#date_from').val() != "all") {
                        $('#reset-filters').removeClass('d-none');
                        showTable();
                    }else if ($('#date_to').val() != "all") {
                        $('#reset-filters').removeClass('d-none');
                        showTable();
                    }else if ($('#survey_status').val() != "all") {
                        $('#reset-filters').removeClass('d-none');
                        showTable();
                    }else if ($('#doctor').val() != "all") {
                        $('#reset-filters').removeClass('d-none');
                        showTable();
                    } else if ($('#titles').val() != "all") {
                        $('#reset-filters').removeClass('d-none');
                        showTable();
                    } else if ($('#surveys').val() != "all") {
                        $('#reset-filters').removeClass('d-none');
                        showTable();
                    } else if ($('#questions').val() != "all") {
                        $('#reset-filters').removeClass('d-none');
                        showTable();
                    }else {
                        $('#reset-filters').addClass('d-none');
                        showTable();
                    }
                });

        $('#reset-filters,#reset-filters-2').click(function() {
            $('#filter-form')[0].reset();

            $('.filter-box .select-picker').selectpicker("refresh");
            $('#reset-filters').addClass('d-none');
            showTable();
        });
        function pieChart() { 

            var dateFrom = $('#date_from').val();
            var dateTo = $('#date_to').val();
            var doctor = $('#doctor').val();
          //  var status = $('#status').val();
            var title = $('#titles').val();
            var survey = $('#surveys').val();
            var question = $('#questions').val();
            var survey_status = $('#survey_status').val();

            var url = "{{ route('survey-report.chart') }}";

            $.easyAjax({
                url: url,
                container: '#survey-chart-card',
                blockUI: true,
                type: "POST",
                data: {
                  //  status: status,
                    dateFrom: dateFrom,
                    dateTo: dateTo,
                    doctor: doctor,
                    title: title,
                    survey: survey,
                    question: question,
                    survey_status: survey_status,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#survey-chart-card').html(response.html);
                }
            });
        }

        pieChart();

        function pieSatisfactionChart() { 

        var dateFrom = $('#date_from').val();
        var dateTo = $('#date_to').val();
        var doctor = $('#doctor').val();
        var title = $('#titles').val();
        var survey = $('#surveys').val();
        var question = $('#questions').val();
        var survey_status = $('#survey_status').val();

        var url = "{{ route('survey-report.satisfaction-chart') }}";

        $.easyAjax({
            url: url,
            container: '#survey-satisfaction-chart-card',
            blockUI: true,
            type: "POST",
            data: {
                dateFrom: dateFrom,
                dateTo: dateTo,
                doctor: doctor,
                title: title,
                survey: survey,
                question: question,
                survey_status: survey_status,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                console.log("////////////////////////////////");
                console.log(response.html);
                
                $('#survey-satisfaction-chart-card').html(response.html);
            }
        });


        var url2 = "{{ route('survey-report.satisfaction-data') }}";

$.easyAjax({
    url: url2,
    container: '#surveyTable',
    blockUI: true,
    type: "POST",
    data: {
        dateFrom: dateFrom,
        dateTo: dateTo,
        doctor: doctor,
        title: title,
        survey: survey,
        question: question,
        survey_status: survey_status,
        _token: '{{ csrf_token() }}'
    },
    success: function(response) {
            fillSurveyTable(response.html);
 
    }
});


        }
        
        pieSatisfactionChart();

        function fillSurveyTable(data) {
            console.log(data);
            
            
    // Clear any existing rows except the header
    $('#surveyTable').find("tr:gt(0)").remove();

    // Loop through the data array and append each item as a new row
  //  data.forEach(item => {
        $('#surveyTable').append(`
            <tr>
                <td>${data.survey_name}</td>
                <td>${data.dateFrom}</td>
                <td>${data.dateTo}</td>
                <td>${data.satisfiedCount}</td>
                <td>${data.notSatisfiedCount}</td>
                <td>${data.satisfiedPercentage}%</td>
            </tr>
        `);
   // });
}
    
</script>
@endpush