@extends('layouts.basic')

@section('styles')
    <style>

    </style>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-6">
                    <h3>Report</h3>
                </div>
                <div class="col-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
                        <li class="breadcrumb-item">Report</li>
                        <li class="breadcrumb-item active">Reports-list</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content content-card">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card content-padding">
                        <div class="card-body">
                            <form id="ReportForm" class="row gy-2 gx-3 align-items-center" action="{{ url('report/export') }}" method="POST" autocomplete="off">
                                @csrf
                                @method('post')
                                <div class="col">
                                    <label for="report_type">Report Type</label>
                                    <select name="report_type" id="report_type" class="form-select" >
                                      <option></option>
                                      <option value="1">Invoice</option>
                                      <option value="2">Convertion</option>
                                      <option value="3">Collection</option>
                                      <option value="4">Overdue</option>
                                    </select>
                                </div>
                                <div class="col">
                                    <label for="customerName">Customer Name</label>
                                    <select name="customerName" id="customerName" class="form-control" >
                                      <option></option>
                                      @foreach ($customers as $customer)
                                      <option value="{{ $customer->id }}">{{ $customer->customer_name }}
                                      </option>
                                      @endforeach
                                      <label id="customerName-error" class="error" for="customerName"></label>
                                    </select>
                                </div>
                                <div class="col d-none">
                                    <label for="created_by">Created By</label>
                                    <select name="created_by" id="created_by" class="form-select" >
                                      <option value="">select Created By</option>
                                      @foreach ($users as $user)
                                      <option value="{{ $user->id }}">{{ $user->name }}
                                      </option>
                                      @endforeach
                                    </select>
                                </div>
                                <div class="col">
                                    <label for="date_range">Date</label>
                                    <input type="text" name="date_range" id="date_range" class="form-control" placeholder="Please select dates">
                                </div>
                               <div class="col mt-3">
                               <div class="text-center filter-btn-group1">
                                    <button  id="clear" type="reset" class="btn filter-clear" style="margin-top:1.5rem">Clear</button> &nbsp;
                                    <button  id="filterButton" type="submit" class="btn gen-report" style="margin-top:1.5rem">Generate Report</button>
                                </div>
                               </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('script')
    <script>
        $(document).ready(function() {
  $('#customerName').select2({
    placeholder: "Choose customer name",
    minimumInputLength: 1
  });
  $('#report_type').select2({
    placeholder: "Choose report type",

  });



$(function() {

$('#date_range').daterangepicker({
    autoUpdateInput: false,
    locale: {
        cancelLabel: 'Clear'
    },
    maxDate: new Date(),
});

$('#date_range').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
});

$('#date_range').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
});

});

});

    $(document).ready(function() {

        $("#ReportForm").submit(function(event) {
            event.preventDefault();
            
            const reportType = $("#report_type").val();
            const customerName = $("#customerName").val();
            const dateRange = $("#date_range").val();

            if (!reportType) {
                iziToast.warning({
                    message: 'Please select at least one Report type!',
                    position: 'topRight'
                });
            } else if (reportType == 4 && !customerName) {
                iziToast.warning({
                    message: 'When overdue selected please select Customer Name!',
                    position: 'topRight'
                });
            } else {
                $("#ReportForm").unbind("submit").submit();
            }
        });

       $("#clear").click(function() {
          $("#report_type").val(null).trigger("change");
         $("#customerName").val(null).trigger("change");
          $("#date_range").val('');
       });
    });


 </script>

@endsection