@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0)">Reports</a></li>
    <li class="breadcrumb-item active" aria-current="page">Ustadz Report Monthly</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-6 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Report Ustadz</h6>
        <p class="text-muted mb-3">report ustadz bulanan</p>
        <div>
            <div class="input-group date datepicker mb-3" id="datePickerExample">
                <input type="text" class="form-control" name="reportDate" id="reportDate">
                <span class="input-group-text input-group-addon"><i data-feather="calendar"></i></span>
            </div>
            <button class="btn btn-success mx-1" onclick="downloadExcel()">Download Report</button>
            <button class="btn btn-primary mx-1" onclick="previewDownloadExcel()">Preview Report</button>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
@endpush

@push('custom-scripts')
    <script>
        $(function() {
            'use strict';

            if($('#datePickerExample').length) {
                var date = new Date();
                var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
                $('#datePickerExample').datepicker({
                format: "mm-yyyy",
                autoclose: true,
                viewMode: "months", 
                minViewMode: "months"
                });
                $('#datePickerExample').datepicker('setDate', today);
            }
        });

        function downloadExcel()
        {
            const dateReport = $('#reportDate').val();
            var url = '{!!route("reports.ustadz.download", ["service" => "-service", "startDate" => "-startDate"])!!}';
            url = url.replace('-service', 'reportUstadz');
            url = url.replace('-startDate', dateReport);
            window.location.href = url;
        }

        function previewDownloadExcel()
        {
            const dateReport = $('#reportDate').val();
            var url = '{!!route("reports.ustadz.download", ["service" => "-service", "startDate" => "-startDate"])!!}';
            url = url.replace('-service', 'reportUstadzPreview');
            url = url.replace('-startDate', dateReport);
            window.open(url, '_blank');
        }
    </script>
@endpush