@extends('backend.master')
@section('title')
    ব্যয়ের রিপোর্ট
@endsection
@section('body')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">ব্যয়ের রিপোর্ট</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('cost.report') }}">রিপোর্ট</a></li>
                        <li class="breadcrumb-item active">রিপোর্ট</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 m-auto">
            <div class="card">
                <div class="card-body">
                    <form action="" method="POST" onsubmit="generateReport()" class="needs-validation" novalidate id="data">
                        <div class="col-md-12">
                            <div class="row">
                                @csrf
                                <div class="col-md-3  mr-5 col-sm-12">
                                    <div class="form-group row mb-4">
                                        <label for="expenditure_sector_id" class="form-label">খাতের নাম<span class="required">*</span></label>
                                        <select name="expenditure_sector_id" required class="form-control select2" id="expenditure_sector_id">
                                            <option value="0">সকল খাতের</option>
                                            @foreach($expenditureSectors as $item)
                                                <option value="{{ $item->id }}">{{ $item->expenditure_sector }}</option>
                                            @endforeach
                                        </select>
                                        <div class="text-danger" id="report_type_alert">

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6  mr-5 col-sm-12">
                                    <div class="form-group row mb-4">
                                        <label for="from_date" class="form-label">Date <span class="required">*</span></label>
                                        <div class="input-daterange input-group" data-date-format="dd-m-yyyy"  data-date-autoclose="true"  data-provide="datepicker">
                                            <input class="form-control" name="from_date" type="text" autocomplete="off" id="from_date" placeholder="From Date" required>
                                            <input class="form-control" name="to_date" type="text" autocomplete="off" id="to_date" placeholder="To date" required>
                                        </div>
                                        <div class="text-danger" id="from_date_alert">

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3  mr-5 col-sm-12">
                                    <div class="form-group row mb-4">
                                        <label for="bank_info_id" class="form-label">ব্যাংক<span class="required">*</span></label>
                                        <select name="bank_info_id" required class="form-control select2" id="bank_info_id">
                                            <option value="0">সকল ব্যাংক</option>
                                            @foreach($bank_infos as $item)
                                                <option value="{{ $item->id }}">{{ $item->bank_name }} ({{ $item->account_number }})</option>
                                            @endforeach
                                        </select>
                                        <div class="text-danger" id="report_type_alert">

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-12">
                                    <div class="form-group mt-4 row mb-4">
                                        <button type="submit" class="btn btn-dark"><i class="fas fa-search"></i> Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-12" id="report">

        </div>
    </div>
    <script>
        function generateReport()
        {
            event.preventDefault();
            let from_date = $("#from_date").val();
            let to_date = $("#to_date").val();
            if(from_date == null || to_date == null)
            {

                if (from_date == null) {
                    $("#from_date_alert").html('From date');
                }
                if (to_date == null) {
                    $("#to_date_alert").html('To date');
                }
                return false;
            }

            $.ajax({
                type:"POST",
                url:'{{ route('cost.report-generate') }}',
                data:$('#data').serialize(),
                beforeSend: function(){
                    var div = '';
                    div += '<div class="col-md-12 text-center center">';
                    div += '<div class="spinner-grow text-success m-1" role="status"> <span class="sr-only">Loading...</span></div><div class="spinner-grow text-info m-1" role="status"><span class="sr-only">Loading...</span></div><div class="spinner-grow text-warning m-1" role="status"><span class="sr-only">Loading...</span></div>';
                    div += '</div>';
                    $('#report').empty();
                    $('#report').append(div);
                },
                success: function(res) {
                    if(res == 1)
                    {
                        toastr.warning('দুঃখিত! আপনার দেয়া তথ্য থেকে কোন ডাটা পাওয়া যায় নাই');
                        $('#report').empty();
                    }
                    else
                    {
                        $('#report').html(res);
                    }

                }
            });
        }
    </script>
@endsection