@extends('Admin.Layouts.Dashboard')

@section('styles')
    <link href="{{asset('css/daterangepicker.css')}}" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css"/>

    <style>
        #reports-results li a:hover {
            cursor: pointer;
            opacity: .75;
        }

        #data-table_length,
        #data-table_filter {
            display: none;
        }

        .daterangepicker,
        .datepicker.datepicker-dropdown.dropdown-menu {
            z-index: 99999999 !important;
        }
    </style>
@endsection

@section('content')

    <!-- Create/Update MonthlyExpenses -->
    <div class="modal fade" id="add-edit-monthly-expenses" tabindex="-1" aria-labelledby="add-edit-monthly-expenses-label" aria-hidden="true">
        <div class="modal-dialog"></div>
    </div>

    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"><a href="{{dashboard_route()}}">الرئيسية /</a></h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">{{$page_title}}</span>
            </div>
        </div>

        <div class="d-flex my-xl-auto right-content">
            <button type="button" data-bs-toggle="modal"
                    data-bs-target="#add-edit-monthly-expenses" id="add-monthly-expenses-btn"
                    class="btn btn-danger btn-icon mb-1 me-1">
                <i class="mdi mdi-plus"></i>
            </button>
        </div>
    </div>

    @include('Admin.MonthlyExpenses._statics')
    
    <!-- Row -->
    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{$page_title}}</h3>
                </div>

                <div class="card-body">

                    <form>
                        <div class="row">

                            <div class="col-lg-4 col-xs-12">
                                <div class="form-group">
                                    <label for="">بحث عن بند</label>
                                    <input class="form-control form-control-lg" id="customSearch" placeholder="ابحث عن تقرير أو رقم جوال" type="text">
                                </div>
                            </div>

                            <div class="col-lg-4 col-xs-12">
                                <label for="">البحث بالتاريخ</label>

                                <div class="input-group">
                                    <div class="input-group-text">
                                        <i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
                                    </div>

                                    <input class="form-control form-control-lg" id="datepicker-date" value="" placeholder="MM/DD/YYYY" type="text">
                                </div><!-- input-group -->
                            </div><!-- col-4 -->


                            <div class="col-lg-4 col-xs-12">
                                <label for="customSelect">عدد النتائج في الصفحة:</label>

                                <select class="form-control form-control-lg" id="customSelect">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="100">500</option>
                                    <option value="100">1000</option>
                                </select>
                            </div><!-- col-4 -->

                        </div>
                    </form>

                    <div class="panel panel-primary tabs-style-3 mb-3">
                        <div class="table-responsive">
                            <table id="data-table"
                                   class="border-top-0 table text-left table-hover text-nowrap key-buttons data-table">
                                <thead>

                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">اسم المصروف</th>
                                    <th scope="col">وصف</th>
                                    <th scope="col">مبلغ</th>
                                    <th scope="col">الشهر</th>
                                    <th scope="col">الاجراءات</th>
                                </tr>

                                </thead>

                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
@endsection

@section('scripts')

    <script type="text/javascript" src="{{asset('js/daterangepicker.js')}}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>

    <script>

        // $('#datepicker-date').daterangepicker({
        //     locale: {
        //         format: 'YYYY-MM',
        //         cancelLabel: 'Clear'
        //     },
        //     showDropdowns: true,
        //     opens: 'left',
        //     autoUpdateInput: false,
        //     singleDatePicker: true
        // }, function(start, end, label) {
        //     var years = start.format('YYYY');
        //     var months = start.format('MM');
        //     $('#datepicker-date').val(start.format('YYYY-MM'));
        // });
        //
        // $('#datepicker-date').on('show.daterangepicker', function(ev, picker) {
        //     picker.container.find(".calendar-table").hide();
        //     picker.container.find(".daterangepicker_start_input").hide();
        //     picker.container.find(".daterangepicker_end_input").hide();
        // });

        $('#datepicker-date').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD',
                separator: " / "
            }
        });

        $('#datepicker-date, #datepicker-payments').val(' ')

        const AddMonthlyExpensesBtn = $('#add-monthly-expenses-btn');
        const EditMonthlyExpensesBtn = '.edit-monthly-expenses-btn';
        const AddEditMonthlyExpensesModal = $('#add-edit-monthly-expenses');

        let table = $('#data-table').DataTable({
            processing: true,
            serverSide: true,
            lengthMenu: [],
            ajax: {
                url: "{{ dashboard_route('monthly_expenses.index') }}",
                data: function (d) {
                    d.datepicker = $('#datepicker-date').val()
                },
                "dataSrc": function ( json ) {

                    $('#total_count').text( json.total_count )
                    $('#total_amount').text( json.total_amount )

                    return json.data;
                }
            },
            language: {
                searchPlaceholder: 'بحث ...',
                scrollX: "100%",
                sSearch: '',
                info: "عرض الصفحة _PAGE_ من _PAGES_",
                lengthMenu: '_MENU_ تقرير/صفحة'
            },
            columns: [
                {data: 'id', name: 'id', orderable: true, searchable: true},
                {data: 'title', name: 'title', orderable: true, searchable: true},
                {data: 'description', name: 'description', orderable: false, searchable: false},
                {data: 'amount', name: 'amount', orderable: true, searchable: true},
                {data: 'date', name: 'date', orderable: true, searchable: false},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ],
            responsive: true,
            order: [0, 'desc']
        });

        AddMonthlyExpensesBtn.on('click', function () {
            AddEditMonthlyExpensesModal.find('.modal-dialog').html(getPreloader());

            $.get('{{dashboard_route('monthly_expenses.create')}}').done(function (data) {
                AddEditMonthlyExpensesModal.find('.modal-dialog').html(data.data);
                $("#date-picker").datepicker({
                    format: "mm-yyyy",
                    viewMode: "months",
                    minViewMode: "months"
                });
            })
        })

        $('body').on('click', EditMonthlyExpensesBtn, function () {
            AddEditMonthlyExpensesModal.find('.modal-dialog').html(getPreloader());

            let url = '{{dashboard_route('monthly_expenses.edit', ':id')}}';
            url = url.replace(':id', $(this).parents('tr').attr('id'));

            $.get(url).done(function (data) {
                AddEditMonthlyExpensesModal.find('.modal-dialog').html(data.data);
                $("#date-picker").datepicker({
                    format: "mm-yyyy",
                    viewMode: "months",
                    minViewMode: "months"
                });
            })
        })

        $('#datepicker-date').on('change', function (){
            table.draw()
        });

        $('#customSelect').on('change', function() {
            var selectedValue = $(this).val();
            table.page.len(selectedValue).draw(); // Set the page length and redraw the table
        });

        // Handle custom search input change event
        $('#customSearch').on('change', function() {
            var searchValue = $(this).val();
            table.search(searchValue).draw(); // Perform search and redraw the table
        });

        $('#payment-status').on('change', function (){
            table.draw()
        });

    </script>

@endsection