@extends('dashboard.layouts.master')

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <!-- Responsive datatable examples -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <!-- Sweet Alert -->
    <link href="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">

    <style type="text/css">
        .item-cart a{
            border-radius: 7px;
            margin: 0px 10px;
            background-color: #eee;
            padding: 7px 15px;
        }
        .item-cart .active{
            background-color: #c1185b;
            color: #fff;
        }
        .badget{
            border-radius: 10px;
            background-color: #ec4561;
            padding: 2px 5px;
            color: #fff;
        }

        .active .badget{
            background-color: #fff;
            color: #000;
        }
    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{ trans('labels.book_orders') }}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ trans('labels.dashboard') }}</a></li>
            <li class="breadcrumb-item active">شحن للكتب</li>
        </ol>
    </div>
    <div class="col-sm-6">
        
    </div>
@endsection

@section('content')
    
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <!-- order list table view -->
                    <div class="table-rep-plugin">
                        <div style="display:flex; margin-bottom: 20px;" class="item-cart">
                            <a href="{{route('admin.book-orders.proccess')}}" class="{{!request()->type ? 'active' : ''}}">
                                طلبات بحاجة للتأكيد 
                                @if($all_orders->where('status', 1)->where('is_confirmed', 0)->count())
                                    <span class="badget">{{$all_orders->where('status', 1)->where('is_confirmed', 0)->count()}}</span>
                                @endif
                            </a>
                            <a href="{{route('admin.book-orders.proccess', ['type' => 'confirmed'])}}" class="{{request()->type == 'confirmed' ? 'active' : ''}}">
                                طلبات تم تاكيدها
                                @if($all_orders->where('status', 1)->where('is_confirmed', 1)->count())
                                    <span class="badget">{{$all_orders->where('status', 1)->where('is_confirmed', 1)->count()}}</span>
                                @endif
                            </a>
                            <a href="{{route('admin.book-orders.proccess', ['type' => 'ready-for-shipping'])}}" class="{{request()->type == 'ready-for-shipping' ? 'active' : ''}}">
                                طلبات جاهزة للشحن
                                @if($all_orders->where('status', 2)->count())
                                    <span class="badget">{{$all_orders->where('status', 2)->count()}}</span>
                                @endif
                            </a>
                            <a href="{{route('admin.book-orders.proccess', ['type' => 'shipped'])}}" class="{{request()->type == 'shipped' ? 'active' : ''}}">
                                طلبات تم شحنها
                                @if($all_orders->where('status', 4)->count())
                                    <span class="badget">{{$all_orders->where('status', 4)->count()}}</span>
                                @endif
                            </a>
                            <a href="{{route('admin.book-orders.proccess', ['type' => 'delivered'])}}" class="{{request()->type == 'delivered' ? 'active' : ''}}">
                                طلبات تم توصيلها
                                {{-- @if($all_orders->where('status', 3)->count())
                                    <span class="badget">{{$all_orders->where('status', 3)->count()}}</span>
                                @endif --}}
                            </a>
                            <a href="{{route('admin.book-orders.proccess', ['type' => 'canceled'])}}" class="{{request()->type == 'canceled' ? 'active' : ''}}">
                                طلبات تم الغائها
                                @if($all_orders->where('status', 5)->count())
                                    <span class="badget">{{$all_orders->where('status', 5)->count()}}</span>
                                @endif
                            </a>
                        </div>
                        <div class="table-responsive mb-0" data-pattern="priority-columns">
                            @if ($orders->count() > 0)
                                <a href="{{route('admin.book-orders.proccess-export', ['type' => request()->type])}}" class="btn btn-primary" style="margin-bottom: 20px;">
                                    export excel
                                </a>
                                <table id="datatable-buttonss"
                                    class="table table-striped table-bordered dt-responsive nowrap"
                                    style="border-collapse: collapse; border-spacing: 0; width: 100%; margin-bottom: 50px;">
                                    <thead>
                                        <tr>
                                            <th>اسم الكتاب</th>
                                            <th>عدد الاوردرات</th>
                                            <th>المطلوب</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($orderBooks as $key => $orderBook)
                                            <tr >
                                                <td>{{$orderBook['title']}}</td>
                                                <td>{{$orderBook['orders']}}</td>
                                                <td>{{$orderBook['qty']}}</td>
                                            </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                                <table id="datatable-buttons"
                                    class="table table-striped table-bordered dt-responsive nowrap"
                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>التاريخ</th>
                                            <th>{{ trans('labels.name') }}</th>
                                            <!-- <th>الكتب</th> -->
                                            <th>العدد</th>
                                            <th>المبلغ</th>
                                            <th>الشحن</th>
                                            <th>{{ trans('labels.total_amount') }}</th>
                                            <th>{{ trans('labels.status') }}</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($orders as $key => $order)
                                            <tr id="{{ $order->id }}">
                                                <td><a href="{{route('admin.book-orders.order-details', $order->id)}}" style="border-radius: 10px;" target="_blank"><i class="fa fa-eye"></i></a> 
                                                   <span style="text-decoration: underline;">{{ $order->id }}</span>
                                                </td>
                                                <td>{{ $order->created_at }}</td>
                                                <td>
                                                    {{ $order->name ?? null }} <br>
                                                    {{ $order->phone }}
                                                </td>
                                                <!-- <td>
                                                    @foreach($order->details as $item)
                                                        <span>{{$item->qty}} X {{$item->book->title}}</span> <br>
                                                    @endforeach
                                                </td> -->
                                                <td>{{ $order->details->sum('qty') }}</td>
                                                <td>{{ $order->amount }}</td>
                                                <td>{{ $order->shipping_fees }} ({{$order->gov}})</td>
                                                <td>{{ $order->total_amount }}</td>
                                                <td>
                                                    {!! $order->status() !!} 
                                                </td>
                                                <td>
                                                    @can('book-orders-change-status')
                                                        {!! $order->statusAction() !!}
                                                    @endcan
                                                </td>
                                            </tr>
                                        @endforeach

                                    </tbody>
                                    <div style="width: 100%;overflow-x: auto;display: block;">
                                    {!!$orders->withQueryString()->links('pagination::bootstrap-4')!!}
                                    </div>
                                </table>
                            @else
                                <div style="display: flex; justify-content: center;">
                                    لا يوجد شحنات
                                </div>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
        </div> <!-- end col -->
    </div> <!-- end row -->
@endsection

@section('script')
    <!-- Required datatable js -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Buttons examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.colVis.min.js') }}"></script>
    <!-- Responsive examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>

    <!-- Datatable init js -->
    {{-- <script src="{{ URL::asset('dashboard/assets/pages/datatables.init.js') }}"></script> --}}


    <!-- Sweet-Alert  -->
    <script src="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.js') }}"></script>

    <script src="{{ URL::asset('js/student-management.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#datatable').DataTable();

            //Buttons examples
            var table = $('#datatable-buttons').DataTable({
                lengthChange: false,
                // order: [1, "desc"],
                buttons: ['copy', 'excel', 'pdf', 'colvis'],
                "bPaginate": false, //hide pagination
                "bInfo": false, // hide showing entries
            });

            table.buttons().container()
                .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
        });
    </script>
    <script>
        $('.refused').click(function(event) {
            event.preventDefault();
            const row = this;
            const id = $(this).attr('data-id');
            Swal.fire({
                title: "{{ trans('labels.what_reason_refuse') }}",
                input: 'text',
                showCancelButton: true,
                confirmButtonText: '{{ trans('labels.ok') }}',
                confirmButtonColor: "#626ed4",
                cancelButtonColor: "#ec4561",
                cancelButtonText: '{{ trans('labels.cancel') }}',
                preConfirm: function(value) {
                    if (value === "") {
                        Swal.showValidationMessage("{{ trans('labels.message_required') }}");
                        return false
                    }
                    return new Promise(function(resolve, reject) {
                        var url =
                            '{{ route('admin.book-orders.changeStatus', ['id' => ':id', 'status' => 'refused']) }}?message=' +
                            value;
                        location.href = url.replace(':id', id);
                    })
                },
            });
        });

        $('.blocked').click(function(event) {
            event.preventDefault();
            const row = this;
            const id = $(this).attr('data-id');
            Swal.fire({
                title: "{{ trans('labels.what_reason_block') }}",
                input: 'text',
                showCancelButton: true,
                confirmButtonText: '{{ trans('labels.ok') }}',
                confirmButtonColor: "#626ed4",
                cancelButtonColor: "#ec4561",
                cancelButtonText: '{{ trans('labels.cancel') }}',
                preConfirm: function(value) {
                    if (value === "") {
                        Swal.showValidationMessage("{{ trans('labels.message_required') }}");
                        return false
                    }
                    return new Promise(function(resolve, reject) {
                        var url =
                            '{{ route('admin.book-orders.changeStatus', ['id' => ':id', 'status' => 'blocked']) }}?message=' +
                            value;
                        location.href = url.replace(':id', id);
                    })
                },
            });
        });

        $('.order-modal').on('click', function() {
            var info = $(this).data('info');
            var message = $(this).data('message');
            $.each(info, function(key, value) {
                if (key != 'actions') {
                    if (key == 'modal-image') {
                        $('#' + key).attr('src', value);
                    } else if (key == 'modal-defaultPhone') {
                        $('#modal-prefer-father').css('color', "");
                        $('#modal-prefer-mother').css('color', "");
                        if (message) {
                            if (message.includes('father')) {
                                $('#modal-prefer-father').css('color', 'blue');
                            }
                            if (message.includes('mother')) {
                                $('#modal-prefer-mother').css('color', 'blue');
                            }
                        } else {
                            if (value.includes('father')) {
                                $('#modal-prefer-father').css('color', 'blue');
                            }
                            if (value.includes('mother')) {
                                $('#modal-prefer-mother').css('color', 'blue');
                            }
                        }
                    } else {
                        $('#' + key).html(value);
                    }
                } else {
                    $.each(value, function(id, url) {
                        if (id == 'prefered-number') {
                            // console.log('0',url);
                            $('#' + id).attr('data-url', url);
                        } else {
                            $('#action-' + id).attr('href', url);
                        }
                    });
                }
            });
        })

        $('.prefered-number').on('click', function() {

            var url = $('#prefered-number').attr('data-url');

            let type = 'POST';
            let data = {};
            data['_method'] = 'PATCH';
            if ($(this).attr('id') == 'modal-prefer-father') {
                data['value'] = 'father';
            } else if ($(this).attr('id') == 'modal-prefer-mother') {
                data['value'] = 'mother';
            }
            var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
            var cache = false;
            var processData = true;
            $.ajax({
                url: url,
                type: type,
                data: data,
                contentType: contentType,
                cache: cache,
                processData: processData,
                success: function(data) {
                    var message = [];
                    $.each($('.prefered-number'), function(index, ele) {
                        $(ele).css('color', '');
                    });

                    if (data.value.includes('father')) {
                        $('#modal-prefer-father').css('color', 'blue');
                        message.push('father');
                    }
                    if (data.value.includes('mother')) {
                        $('#modal-prefer-mother').css('color', 'blue');
                        message.push('mother');
                    }

                    // if(data.value == 'father'){
                    //     $('#modal-prefer-father').css('color', 'blue');
                    //     message = 'father';
                    // }else if(data.value == 'mother'){
                    //     $('#modal-prefer-mother').css('color', 'blue');
                    //    message = 'mother';
                    // }
                    $('#' + data.id).find('.order-modal').attr('data-message', message);
                    // console.log( $('#'+data.id).find('.order-modal').data('message'));
                },
                error: function(data) {

                }
            });
        });
    </script>
    <!-- Sweet-Alert  -->
    <script src="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.js') }}"></script>

    <script>
        $('.delete-confirm').click(function(event) {
            event.preventDefault();
            const url = $(this).attr('href');
            Swal.fire({
                title: "{{ trans('labels.are_you_sure_deleting') }}",
                text: "{{ trans('labels.you_wont_be_able_to_revert_this') }}",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "{{ trans('labels.cancel') }}",
                confirmButtonColor: "#02a499",
                cancelButtonColor: "#ec4561",
                confirmButtonText: "{{ trans('labels.yes_delete') }}"
            }).then(function(result) {
                if (result.value) {

                    Swal.fire({
                        title: "{{ trans('labels.deleted') }}",
                        text: "",
                        type: "success",
                        confirmButtonText: "{{ trans('labels.ok') }}"
                    });
                    $('<form action="' + url + '" method="post"> @csrf @method('delete')</form>').appendTo(
                        'body').submit();
                }
            });
        });

        $('.change-order-status').click(function(event) {
            event.preventDefault();
            const url = $(this).attr('href');
            Swal.fire({
                title: "هل ترغب حقا في تحديث الحالة",
                text: "{{ trans('labels.you_wont_be_able_to_revert_this') }}",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "{{ trans('labels.cancel') }}",
                confirmButtonColor: "#02a499",
                cancelButtonColor: "#ec4561",
                confirmButtonText: "تاكيد"
            }).then(function(result) {
                if (result.value) {

                    Swal.fire({
                        title: "تم التحديث",
                        text: "",
                        type: "success",
                        confirmButtonText: "{{ trans('labels.ok') }}"
                    });
                    $('<form action="' + url + '" method="post"> @csrf </form>').appendTo(
                        'body').submit();
                }
            });
        });
    </script>
@endsection