@extends('admin.layout.master')
@section('content')
    <div class="content">
        <div class="row align-items-center g-3 g-xxl-0 h-100 align-content-between">
            <div class="col-12 col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-12">
                <div class="card p-3">
                    <div class="d-flex align-items-center"><span class="fs-4 lh-1 uil uil-books text-primary-dark"></span>
                        <div class="ms-2">
                            <div class="d-flex align-items-end">
                                <h2 class="mb-0 me-2">{{ $data['company'] }}</h2><span
                                    class="fs-7 fw-semibold text-body">Companies</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-12">
                <div class="card p-3">
                    <div class="d-flex align-items-center"><span
                            class="fs-4 lh-1 uil uil-users-alt text-success-dark"></span>
                        <div class="ms-2">
                            <div class="d-flex align-items-end">
                                <h2 class="mb-0 me-2">{{ $data['user'] }} </h2><span
                                    class="fs-7 fw-semibold text-body">Clients</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-6 col-xl-4 col-xxl-12">
                <div class="card p-3">
                    <div class="d-flex align-items-center"><span class="fs-4 lh-1 uil uil-invoice text-warning-dark"></span>
                        <div class="ms-2">
                            <div class="d-flex align-items-end">
                                <h2 class="mb-0 me-2">{{ $data['offer'] }}</h2><span
                                    class="fs-7 fw-semibold text-body">Offers</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-none border mt-4">
            <div class="card-header p-4 border-bottom bg-body">
                <div class="row g-3 justify-content-between align-items-end">
                    <div class="col-md-12">

                        <form action="" method="POST" id="filter_array">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label" for="company">Company Email (Name) </label>
                                    <select name="company" id="company" class="form-control single-select">
                                        <option value="">Select Company</option>
                                        @foreach ($data['company_details'] as $C)
                                            <option value="{{ $C['id'] }}">
                                                {{ $C['company_email'] . '(' . $C['company_name'] . ')' }}
                                            </option>
                                        @endforeach
                                    </select>

                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="company_name">Date </label>

                                    <input class="form-control datetimepicker" id="datepicker" type="text"
                                        placeholder="dd/mm/yyyy" name="date" value=""
                                        data-options='{"disableMobile":true,"dateFormat":"Y-m-d","mode":"range"}' />

                                </div>

                            </div>
                            <div class="row mt-2">
                                <div class="col-md-4">
                                    <button class="btn btn-primary p-2 " type="submit">
                                        <span class="fa fa-filter"></span> {{ 'Filter' }}
                                    </button>

                                    <button class="btn btn-danger p-2 filter_reset" type="button">
                                        <span class="fa fa-refresh"></span> {{ 'Reset' }}
                                    </button>

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

        </div>

        <div class="AppendData mt-4"></div>

        <div class="card shadow-none border mt-4">
            <div class="card-header p-4 border-bottom bg-body">
                <div class="row g-3 justify-content-between align-items-end">
                    <div class="col-md-12">

                        <form action="" method="POST" id="filter_customer_array">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label" for="customer">Customer Name </label>
                                    <select name="customer" id="customer" class="form-control single-select">
                                        <option value="">Select Customer</option>
                                        @foreach ($data['customer'] as $C)
                                            <option value="{{ $C['id'] }}">
                                                {{ $C['name'] . '(' . $C['percentage'] . '%)' }}
                                            </option>
                                        @endforeach
                                    </select>

                                </div>
                                @php
                                    $lastMonthStartDate = \Carbon\Carbon::now()
                                        ->subMonthsNoOverflow()
                                        ->startOfMonth()
                                        ->toDateString();
                                    $lastMonthEndDate = \Carbon\Carbon::now()
                                        ->subMonthsNoOverflow()
                                        ->endOfMonth()
                                        ->toDateString();

                                    $customer_date = $lastMonthStartDate . ' to ' . $lastMonthEndDate;

                                @endphp
                                <div class="col-md-6">
                                    <label class="form-label" for="customer_date">Date </label>

                                    <input class="form-control datetimepicker" id="datepicker" type="text"
                                        placeholder="dd/mm/yyyy" name="customer_date" value="{{ $customer_date }}"
                                        data-options='{"disableMobile":true,"dateFormat":"Y-m-d","mode":"range"}' />

                                </div>

                            </div>
                            <div class="row mt-2">
                                <div class="col-md-4">
                                    <button class="btn btn-primary p-2 " type="submit">
                                        <span class="fa fa-filter"></span> {{ 'Filter' }}
                                    </button>

                                    <button class="btn btn-danger p-2 filter_customer_reset" type="button">
                                        <span class="fa fa-refresh"></span> {{ 'Reset' }}
                                    </button>

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

        </div>

        <div class="AppendCustomerData mt-4"></div>

    </div>

@section('script')
    <script>
        $(document).on('click', '.pagination a.page-link', function(event) {
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            fetch_data(page);
        });

        function fetch_data(page) {
            var data = $("#filter_array").serializeArray();
            data.push({
                name: "page",
                value: page
            });
            $.ajax({
                url: "{{ route('admin.dashboard_company') }}",
                datatype: 'JSON',
                data: data,
                beforeSend: function() {

                    $('html, body').animate({
                        scrollTop: $(".AppendData").offset().top - 100
                    }, 600);

                    // $.scrollTo($('.AppendData'), 1000);
                    $('.AppendData').html(
                        '<img src="{{ asset('uploads/loader.gif') }}" class="product_loader" />'
                    );
                },
                success: function(data) {
                    $('.AppendData').html(data);
                }
            });
        }

        $("#filter_array").submit(function(e) {
            e.preventDefault();
            if ($('#company').val() != "") {
                fetch_data(1);
            } else {
                danger_msg("select company");
            }
        });

        $(".filter_reset").click(function() {
            $("#company").val('').trigger('change')

            $("#filter_array")[0].reset();
            // $("#country").val('').trigger('change');
            // $("#state").val('').trigger('change');
            // $("#city").val('').trigger('change');
            // $("#status").val('').trigger('change');
            fetch_data(1);
        });


        $("#filter_customer_array").on("submit", function(e) {
            e.preventDefault();
            var data = $("#filter_customer_array").serializeArray();
            $.ajax({
                url: "{{ route('admin.dashboard_customer_data') }}",
                datatype: 'JSON',
                data: data,
                beforeSend: function() {

                    $('html, body').animate({
                        scrollTop: $(".AppendCustomerData").offset().top - 100
                    }, 600);

                    // $.scrollTo($('.AppendData'), 1000);
                    $('.AppendCustomerData').html(
                        '<img src="{{ asset('uploads/loader.gif') }}" class="product_loader" />'
                    );
                },
                success: function(data) {
                    $('.AppendCustomerData').html(data);
                }
            });
        })

        $(document).on("submit", "#update_remark_form", function(e) {

            e.preventDefault();
            var customer_remark = $("#customer_remark").val();
            if (customer_remark != "") {

                var data = $("#update_remark_form").serializeArray();
                $.ajax({
                    url: "{{ route('admin.remark_update') }}",
                    datatype: 'JSON',
                    data: data,

                    success: function(data) {
                        success_msg("Remark Update Sucessfully...");

                    }
                });
            } else {
                danger_msg("Remark is required");
            }
        })
    </script>
@endsection
@endsection