@extends('layouts.app')

@section('content')
    <div class="d-flex">

        <h4 class="text-start f-bold ms-5 text-p"> المبيعات </h4>

    </div>
    <div class="mx-5">

        <div class="row">
            <div class="col-4">
                <label class="py-3 test-p2 fs-6 fw-bolder" for="course_id"> اسم المدرس </label>
                <select id="admin_id" name="admin_id" class=" form-select select-field form-select-lg mb-3"
                    aria-label=".form-select-lg example">
                    <option value="">عرض الكل</option>
                    @foreach ($teachers as $teacher)
                        <option value="{{ $teacher->admin->id }}">{{ $teacher->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-4">
                <label class="py-3 test-p2 fs-6 fw-bolder" for="from">من تاريخ </label>
                <input type="datetime-local" class="form-control py-2" id="from" name="from"
                    placeholder=" من تاريخ " value="{{ old('from', null) }}">
            </div>
            <div class="col-4">
                <label class="py-3 test-p2 fs-6 fw-bolder" for="to">إلى تاريخ </label>
                <input type="datetime-local" class="form-control py-2" id="to" name="to"
                    placeholder=" إلى تاريخ ">
            </div>
            <div class="col-6">
                <div class="teacher_percent text-center m-2"><span class=""> نسبة المدرس : </span><span class=""
                        id="teacher_ajax"></span></div>
            </div>
            <div class="col-6">
                <div class="total_price text-center m-2"><span class=""> المبيعات : </span><span class=""
                        id="total_ajax"></span></div>
            </div>
        </div>
    </div>
    <div class="p-5 m-auto justify-content-center">

        <div class="overflow-scroll">
            <table class="table table-bordered data-table" id="sales-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>أسم المشترى</th>
                        <th>الأسم</th>
                        <th>النوع </th>
                        <th width="100px">التكلفة</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('js')
    {{-- {{ $dataTable->scripts(attributes: ['type' => 'module']) }} --}}
    <script >
        var table;
        $(function() {

            table = $('#sales-table').DataTable({
                processing: true,
                serverSide: true,
                dom:'<\"d-flex justify-content-between\"B<\"text-left\"f>>r<\"overflow-scroll\"t>ip',
                ajax: {
                    url: "{{ route('students.sales') }}",
                    type: 'GET',
                    data: function(data) {
                        data.admin_id = $('#admin_id').val(),
                            data.from = $('#from').val(),
                            data.to = $('#to').val(),
                            data.search = $('input[type="search"]').val()
                    }
                },
                "select":{"style":"single"},
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'student.username',
                        name: 'student.username',
                        orderable :false
                    },
                    {
                        data: 'name',
                        name: 'name',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'coust',
                        name: 'coust'
                    },
                    // {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                buttons:["excel","print"],
            });

        });
        $(document).on('change', '#admin_id , #from , #to ,input[type="search"]', function(e) {

            table.draw();
            sendAjax("{{ route('sales.report') }}", {
                admin_id: $('#admin_id').val(),
                from: $('#from').val(),
                to: $('#to').val(),
                search: $('input[type="search"]').val()
            }, false).then((success) => {
                if (success) {
                    $("#teacher_ajax").html(success.data.teacher_value)
                    $("#total_ajax").html(success.data.total_price)
                    console.log(success.data);
                }
            });

        });
        $(document).on('keyup', 'input[type="search"]', function(e) {

            table.draw();
            sendAjax("{{ route('sales.report') }}", {
                admin_id: $('#admin_id').val(),
                from: $('#from').val(),
                to: $('#to').val(),
                search: $('input[type="search"]').val()
            }, false).then((success) => {
                if (success) {
                    $("#teacher_ajax").html(success.data.teacher_value)
                    $("#total_ajax").html(success.data.total_price)
                    console.log(success.data);
                }
            });

        });
        const sendAjax = async (url, data, hasToastr = true) => {
            let token = $('meta[name="csrf-token"]').attr('content');
            return await $.ajax({
                headers: {
                    'X-CSRF-TOKEN': token
                },
                type: "post",
                url,
                data: {
                    token,
                    ...data
                },
                dataType: "json",
                success: function(response) {
                    if (hasToastr) {
                        toastr.success("تم بنجاح")
                    }
                    return response;
                },
                error: function(error) {
                    if (hasToastr) {
                        toastr.error(error.responseJSON.message)
                    }
                    return false
                }
            });
        }
    </script>
@endsection