@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">
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">طلبات</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 class="float-right d-none d-md-block">
    
        </div>
    </div>
@endsection

@section('content')
    <div class="row" style="text-align: right !important;">
    <div class="col-md-12">
    <div class="x_panel">
        <section style="padding: 0px 20px;
                margin-top: 10px;
                margin-bottom: 70px;">
            <!-- title row -->
            <!-- <div class="row">
                <div class="  invoice-header">
                    <h1>
                        طلب تاكيد دفع  
                    </h1>
                    <h6 class="pull-right"> {{$order->created_at}}</h6>
                </div> -->
            <!-- /.col -->
            <!-- </div> -->
            <!-- info row -->
            <div class="row invoice-info" style="margin-bottom: 20px;">
            
                <!-- /.col -->
                <div class="col-sm-4 invoice-col">
                    <div>
                        <b>اوردر رقم:</b>  {{$order->id ?? ""}}
                    </div>
                    <div>
                        <b>حاله الطلب:</b> {!! $order->status() !!}
                    </div>
                    <div>
                        <b>وقت الطلب:</b> {{$order->created_at}}
                    </div>
                    <div>
                        <b>اسم الطالب:</b> {{$order->name}}
                    </div>
                    <div>
                        <b>رقم الهاتف:</b> {{$order->phone}}
                    </div>
                    <div>
                        <b>رقم هاتف احتياطي:</b> {{$order->backup_phone}}
                    </div>
                    <div>
                        <b>رقم الواتساب:</b> {{$order->whatsapp_number}}
                    </div>
                    <div>
                        <b>العنوان :</b> {{$order->address}}
                    </div>
                    <div>
                        <b>المحافظة :</b> {{$order->gov}} | {{$order->city}}
                    </div>
                    
                </div>
            <!-- /.col -->
            </div>
            <!-- /.row -->

            <!-- Table row -->
            <div class="row">
                <div class="  table">
                    <form action="{{route('admin.book-orders.update-to-new-order', ['id' => $order->id])}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>الكمية</th>
                                    <th>الكتاب</th>
                                    <th>السعر</th>
                                    <th>المبلغ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($books as $book)
                                    <tr>
                                        <td>{{$book->title}}</td>
                                        <td>
                                            <select class="form-control qty" data-fees="{{$book->fees}}" name="qty[{{$book->id}}]">
                                                @foreach([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] as $i)
                                                    <option value="{{$i}}" >{{$i}}</option>
                                                @endforeach
                                                
                                            </select>
                                        </td>
                                        <td>{{$book->fees}}</td>
                                        <td class="total_amount">0 جنية مصري</td>
                                    </tr>
                                @endforeach
                                
                            </tbody>
                        </table>

                        <button class="btn btn-primary" type="submit">انشاء طلب جديد</button>
                    </form>
                </div>
            <!-- /.col -->
            </div>
            <!-- /.row -->

            <div class="row">
           
                <div class="col-md-6">
                    <div class="table-responsive">
                        <table class="table">
                            <tbody>
                            <tr>
                                <th style="width:50%">اجمالي المبلغ:</th>
                                <td id="amount"></td>
                            </tr>
                            <tr>
                                <th>تكلفة الشحن</th>
                                <td id="shipping_fees">{{$order->shipping_fees}}</td>
                            </tr>
                            <!-- <tr>
                                <th>الخصم:</th>
                                <td>{{$order->discount_value}}</td>
                            </tr> -->
                            <tr>
                                <th>اجمالي:</th>
                                <td id="total_amount"></td>
                            </tr>
                            </tbody>
                        </table>
                        
                    </div>
                </div>
            </div>
            <!-- /.row -->
            <div class="row" style="margin-top:20px">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div>
                                <h4 class="mt-0 header-title" style="display:inline;">خطوات الاوردر </h4>
                            </div>
                            @foreach ($order->logs as $log)
                                <div class="m-t-20">
                                    <a class="media">
                                        <img class="d-flex ml-3 rounded-circle"
                                            src="{{ URL::asset('dashboard/assets/images/users/user-2.jpg') }}"
                                            alt="Generic placeholder image" height="36">
                                        <div class="media-body chat-user-box">
                                            <p class="user-title m-0">{{ $log->admin->name ?? "" }}
                                                <span class="text-muted"
                                                    style="font-size: 12px; float: left;">{{ $log->created_at }}</span>
                                            </p>
                                            <p class="text-muted">{{ $log->title }}</p>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        </section>
        </div>
    </div>
    </div>
</div>
@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>
        $('.qty').on('change', function(){
            let fees = $(this).data('fees');
            let total_amount = $(this).val() * fees;

            var tr = $(this).closest('tr');

            var child = tr.find('.total_amount');
            child.html(total_amount + " جنية مصري");

            getTotal();
        });

        function getTotal(){
            let shipping_fees = $('#shipping_fees').text();
            let total = 0;
            $('.qty').each(function(index, el) {
                total = total + $(el).val() * $(el).data('fees');
            });
            let total_amount_v = parseInt(total) + parseInt(shipping_fees); 
            $('#amount').html(total + " جنية مصري");
            $('#total_amount').html(total_amount_v + " جنية مصري");
        }
    </script>
@endsection