@extends('admin.include.master')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 id="page-title">Office Wise Report</h1>
                </div>
                {{-- <div class="col-md-6">
                    <p id="selectTriggerFilter"><label><b>Select DDO/Office:</b></label> </p>
                </div> --}}
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            {{-- Country List --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-md-6">
                                </div>
                                <div class="col-md-6">
                                    <form id="getOfficeWiseReportForm">
                                        <div class="row g-3">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <div class="form-group clearfix">
                                                        <div class="col-sm-12">
                                                            <div class="icheck-primary d-inline">
                                                                <input type="radio" id="DDOWise" value="DDOWise"
                                                                    name="OfficeWiseReport" checked="">
                                                                <label class="mb-0" for="DDOWise">DDO Wise</label>
                                                            </div>
                                                            <div class="icheck-primary d-inline">
                                                                <input type="radio" id="OfficeWise" value="OfficeWise"
                                                                    name="OfficeWiseReport">
                                                                <label class="mb-0" for="OfficeWise">Office Wise</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-5">
                                                {{-- DDO List --}}
                                                <div class="form-group mb-2" id="DDOField">
                                                    {{-- <label class="mb-0" for="DDO">Select DDO</label> --}}
                                                    <select class="form-control form-control-sm select2"
                                                        style="width: 100%;" aria-hidden="true" name="DDO" id="DDO"
                                                        data-placeholder="Select DDO" required>
                                                        <option value="" disabled selected>Select DDO <span
                                                                class="text-danger">*</span></option>
                                                    </select>
                                                </div>
                                                {{-- Work Place List --}}
                                                <div class="form-group mb-2" id="WorkPlaceField" style="display: none">
                                                    {{-- <label class="mb-0">Select Work Place</label> --}}
                                                    <select class="form-control form-control-sm select2"
                                                        style="width: 100%;" aria-hidden="true" name="WorkPlace"
                                                        id="WorkPlace" data-placeholder="Work Place Name">
                                                        <option value="" selected disabled>Place Name</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <button type="submit" class="btn btn-success btn-sm"
                                                    name="Get Report">Get Report</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="emplaoyeeTableFilter" class="table table-bordered table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>S.No.</th>
                                        <th>Head Description</th>
                                        <th>Type of Scheme</th>
                                        <th>Employee Name</th>
                                        <th>Designation</th>
                                        <th>Department</th>
                                        <th>Location</th>
                                        <th>DOB</th>
                                        <th>Joining Date</th>
                                        <th>Category</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- @foreach ($OfficeWiseReport as $OfficeWiseReport)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                    <td>{{ $OfficeWiseReport->DDOName }}</td>
                                    <td>{{ $OfficeWiseReport->NameOfScheme }}</td>
                                    <td><a href="{{ url('view-employee',$OfficeWiseReport->EmployeeId ) }}"
                                            target="_blank"
                                            rel="noopener noreferrer">{{ $OfficeWiseReport->EmployeeName }}</a></td>
                                    <td>{{ $OfficeWiseReport->DesignationName }}</td>
                                    <td>{{ $OfficeWiseReport->DepartmentName }}</td>
                                    <td>{{ $OfficeWiseReport->ActualWorkPlace }}</td>
                                    <td>{{ date('d-M-Y', strtotime($OfficeWiseReport->DateOfBirth)) }}</td>
                                    <td>
                                        {{ date('d-M-Y', strtotime($OfficeWiseReport->PromotionTransferDate)) }}
                                    </td>
                                    <td></td>
                                    </tr>
                                    @endforeach --}}
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                    </form>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->

        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>


<script>
    $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "{{ url('/ddo-list') }}",
          dataType: "json",
          success: function(response) {
            var json = response.DDOList;
            $.each(json, function(i, ddo) {
              $("#DDO").append("<option value='" + ddo.DDOId + "'>" + ddo.DDOName + "</option>");
              $('#DDO').trigger('change');
            });
          }
        });
    });

    // Work place
    $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "{{ url('/actual-work-place-list') }}",
          dataType: "json",
          success: function(response) {
            var json = response.AWPList;
            $.each(json, function(i, AWPList) {
              $("#WorkPlace").append("<option value='" + AWPList.ActualWorkPlaceId + "'>" + AWPList.ActualWorkPlaceName + "</option>");
              $('#WorkPlace').trigger('change');
            });
          }
        });
      });
</script>
<script>
    $("input[name='OfficeWiseReport']").change(function(){
      $("#DDO, #WorkPlace").val(null).trigger('change');
      if($(this).val()=="DDOWise") {
        $("#DDOField").css('display', 'block');
        $("#DDO").prop('required', true);
        $("#WorkPlaceField").css('display', 'none');
        $("#WorkPlace").prop('required', false);
      }
      else {
        $("#WorkPlaceField").css('display', 'block');
        $("#WorkPlace").prop('required', true);
        $("#DDOField").css('display', 'none');
        $("#DDO").prop('required', false);
      }
    });
</script>

{{-- Ajax Data --}}
{{-- Validate and Submit Filter --}}
<script>
    $(function () {
      $.validator.setDefaults({
        submitHandler: function () {
            applyReportFilter();
        }
      });
      // Validate Fields
      $('#getOfficeWiseReportForm').validate({
        rules: {
            OfficeWiseReport: {
            required: true,
          },
        },
        messages: {
            OfficeWiseReport: {
            required: "Please select the option.",
          },
          DDO: {
            required: "Please select the DDO.",
          },
          WorkPlace: {
            required: "Please select the Work Place.",
          },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }
      });
    });
</script>

{{-- Apply Filter Function --}}
<script>
    function applyReportFilter() {
        //event.preventDefault();
            $("#emplaoyeeTableFilter tbody").empty();
            $('#emplaoyeeTableFilter').dataTable().fnClearTable();
            $('#emplaoyeeTableFilter').dataTable().fnDestroy();
        $.ajax({
            type: "get",
            url: "{{ url('get-office-wise-report') }}",
            dataType: "json",
            data: $('form#getOfficeWiseReportForm').serialize(),
            success: function(response) {
                $('#emplaoyeeTableFilter').find('tbody').append(response.OfficeWiseReportOutput);
                    $("#emplaoyeeTableFilter").DataTable({
                        "responsive": true,
                        "lengthChange": true,
                        "autoWidth": false,
                        "lengthMenu": [10, 20, 50, 100, 250, 500],
                        "columnDefs": [{ "orderable": false, "targets": 0 }],
                        "buttons": ["excel", "pdf", "print", "colvis"]
                    }).buttons().container().appendTo('#emplaoyeeTableFilter_wrapper .col-md-6:eq(0)');
            },
        });
    }

    $(document).ready(function(){
        applyReportFilter();
    });

</script>
<!-- /.content-wrapper -->
@endsection