@extends('backend.layouts_backend.master2')

@section('title')
    Expenses Reports
@endsection
@section('content')
    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            @php
                $logged_user_id = Auth::user()->id;
            @endphp
            <h4 class="mb-3 mb-md-0">Filter Expenses Reports </span>
            </h4>
        </div>
        <div class="d-flex justify-content-md-end">

        </div>
    </div>

    {{-- alert --}}
    @if (session('messagedelete'))
        <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show mb-3" role="alert">
            <i class="mdi mdi-block-helper label-icon"></i>
            {{ session('messagedelete') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- search form --}}
    @if (Auth::user()->can('search-expenses'))
        <div class="card light_blue_bg light_blue_border_bottom">
            <div class="card-body">
                <div class="row d-flex justify-content-center">
                    <div class="col-12 col-md-12 align-items-center mx-auto">
                        <form method="post" action="{{ route('expenses.search') }}">
                            @csrf

                            <div class="row row-cols-1 row-cols-md-4 g-3"> <!-- Auto column layout -->
                                <div class="col">
                                    <div class="form-group">
                                        <label>Select Period</label>
                                        <select class="form-control form-select search_data" name="dates" id="dates">
                                            <option value="">-- Select --</option>
                                            <option value="today">Today</option>
                                            <option value="yesterday">Yesterday</option>
                                            <option value="custom_date">Custom Date</option>
                                            <option value="custom_date_range">Date Range</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col" id="custom_date_group" style="display: none;">
                                    <div class="form-group">
                                        <label>Custom Date</label>
                                        <input type="date" name="custom_date" id="custom_date" class="form-control">
                                    </div>
                                </div>

                                <div class="col" id="start_date_group" style="display: none;">
                                    <div class="form-group">
                                        <label>Start Date</label>
                                        <input type="date" name="start_date" id="start_date" class="form-control">
                                    </div>
                                </div>

                                <div class="col" id="end_date_group" style="display: none;">
                                    <div class="form-group">
                                        <label>End Date</label>
                                        <input type="date" name="end_date" id="end_date" class="form-control">
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group">
                                        <label> Branch</label>
                                        <select name="branch_id" id="" class="form-select search_data">
                                            <option value=""> -- Select --</option>
                                            @foreach ($branches as $branch)
                                                <option value="{{ $branch->id }}" @selected($company_info->branch_id == $branch->id ?? '')>
                                                    {{ $branch->branch_name }} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group">
                                        <label> Expense Category</label>
                                        <select name="expense_category_id" id="" class="form-select search_data">
                                            <option value=""> -- Select --</option>
                                            @foreach ($expense_categories as $expense_category)
                                                <option value="{{ $expense_category->id }}">
                                                    {{ $expense_category->expense_category_name }}
                                                </option>
                                            @endforeach
                                        </select>


                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group">
                                        <label> User</label>
                                        <select name="created_by" id="" class="form-select search_data">
                                            <option value=""> -- Select --</option>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->id }}">
                                                    {{ $user->first_name }} {{ $user->last_name }} 
                                                 </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group">
                                        <label>Min Amount</label>
                                        <input type="number" name="min_amount" id="min_amount" placeholder="Min Amount"
                                            class="form-control">
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group">
                                        <label>Max Amount</label>
                                        <input type="number" name="max_amount" id="max_amount" placeholder="Max Amount"
                                            class="form-control">
                                    </div>
                                </div>

                                <div class="col text-center">
                                    <label></label>
                                    <button type="submit" class="btn btn-success w-100">

                                        <i class="fa fa-paper-plane"></i> Search
                                    </button>
                                </div>
                            </div>



                        </form>
                    </div>
                </div>

                <div class="row text-center">
                    <div class="col-md">
                        <div class="row">
                            <div class="col col-md text-center">
                                <p>{{ $searched_data_string ?? '' }}</p>
                            </div>
                        </div>
                    </div>
                </div>



            </div>

        </div><br>

        <div class="row text-center">
            <div class="col-md">
                <div class="row">
                    <div class="col col-md text-center">
                        <p>{{ $searched_data_string ?? '' }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif
    {{-- end search form --}}
    <br>

{{-- 
    <div class="card">
        <div class="card-body">
            <h4>Expenses Reports</h4>
        </div>
    </div> --}}
@endsection


@section('extra_scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        // all select2 ids
        $('.search_data,.add_more_select_ids').select2({
            width: '100%',
        });

        // make select2 better display in input fields //avoid overlap
        $('.select2-selection.select2-selection--single').css('height', 'calc(2.85rem)');
        $('.select2-selection.select2-selection--single').css('padding-top', '3px');
        $('.select2-selection__arrow').css('top', '10px');
    </script>






    {{-- search dynamic javascript --}}
    <script>
        $(document).ready(function() {
            function updateForm() {
                var selectedDate = $('#dates').val();
                $('#custom_date_group').hide();
                $('#start_date_group').hide();
                $('#end_date_group').hide();

                if (selectedDate === 'custom_date') {
                    $('#custom_date_group').show();
                } else if (selectedDate === 'custom_date_range') {
                    $('#start_date_group').show();
                    $('#end_date_group').show();
                }
            }

            $('#dates').change(updateForm);
            updateForm(); // Initial call to set the correct fields on page load
        });
    </script>

    {{-- end of dynamic search javascript --}}
@endsection