@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">
                    @if($order->status == 1)
                    <div>
                        <div style="color: red;">يستخدم هذا الخيار عند الرغبة في تعديل كامل الطلب وقيمته</div>
                        <a href="{{route('admin.book-orders.edit-for-order', ['id' => $order->id])}}" class="btn btn-primary">تعديل الطلب بالكامل</a>
                    </div>
                    @endif
                    <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}}
                        @if(auth()->user()->hasRole('SuperAdmin'))
                        <a href="{{ route('admin.book-orders.reset-gov', $order->id) }}" class="btn btn-danger btn-sm">
                            اعادة تهيئة المحافظة
                        </a>
                        @endif
                    </div>
                    
                </div>
            <!-- /.col -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            تعديل بيانات
                        </div>
                        <div class="card-body">

                            <form id="form-horizontal" class="form-horizontal form-wizard-wrapper"
                                action="{{ route('admin.book-orders.update-info', $order->id) }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="_method" value="PATCH">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <label for="name"
                                                class="col-lg-3 col-form-label">الاسم</label>
                                            <div class="col-lg-9">
                                                <input id="name" name="name" type="text"
                                                    class="required form-control @error('name') is-invalid @enderror"
                                                    value="{{ $order->name }}" required>
                                                @error('name')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <label for="phone"
                                                class="col-lg-3 col-form-label">الهاتف</label>
                                            <div class="col-lg-9">
                                                <input id="phone" name="phone" type="text"
                                                    class="required form-control @error('phone') is-invalid @enderror"
                                                    value="{{ $order->phone }}" required>
                                                @error('phone')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <label for="backup_phone"
                                                class="col-lg-3 col-form-label">احتياطي</label>
                                            <div class="col-lg-9">
                                                <input id="backup_phone" name="backup_phone" type="text"
                                                    class="required form-control @error('backup_phone') is-invalid @enderror"
                                                    value="{{ $order->backup_phone }}" required>
                                                @error('backup_phone')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label for="gov"
                                                class="col-lg-2 col-form-label">المحافظة</label>
                                            <div class="col-lg-10">
                                                @if($order->gov_id)
                                                    <select class="form-control" disabled>
                                                        <option value="{{$order->governate->id}}">{{$order->governate->name}}</option>
                                                    </select>
                                                @else
                                                    <select class="form-control" name="gov_id" required>
                                                        <option value="">----</option>
                                                        @foreach($govs as $gov)
                                                            <option value="{{$gov->id}}">{{$gov->name}}</option>
                                                        @endforeach
                                                    </select>
                                                @endif
                                                @error('gov_id')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label for="gov"
                                                class="col-lg-2 col-form-label">المدينة</label>
                                            <div class="col-lg-10">
                                                <select class="form-control" name="city_id" id="city_id" required>
                                                    <option value="">-------</option>
                                                    @foreach($order->cities() as $city)
                                                        @if($city->is_valid == 1)
                                                            <option value="{{$city->id}}" @if($city->id == $order->city_id) selected @endif>{{$city->name}}</option>
                                                        @else
                                                            <option value="{{$city->id}}" disabled>{{$city->name}} (خارج التغطية)</option>
                                                        @endif  
                                                    @endforeach
                                                </select>
                                                @error('gov')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group row">
                                            <label for="backup_phone"
                                                class="col-lg-1 col-form-label">العنوان</label>
                                            <div class="col-lg-11">
                                                <input id="address" name="address" type="text"
                                                    class="required form-control @error('address') is-invalid @enderror"
                                                    value="{{ $order->address }}" required>
                                                @error('address')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-success">تحديث</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Table row -->
            <div class="row">
                <div class="  table">
                    <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>الكمية</th>
                            <th>الكتاب</th>
                            <th>السعر</th>
                            <th>المبلغ</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($order->details as $item)
                            <tr>
                                <td>{{$item->qty}}</td>
                                <td>
                                    <select id="book" class="form-control" href="{{route('admin.book-orders.changeStatus', ['id' => $item->id, 'status' => 1, 'type' => 'change_book'])}}">
                                        @foreach($item->books() as $book)
                                            <option value="{{$book->id}}" @if($book->id == $item->book_id) selected @endif>{{$book->title}}</option>
                                        @endforeach
                                        
                                    </select>
                                    <!-- {{$item->book->title}} -->
                                </td>
                                <td>{{$item->fees}}</td>
                                <td>{{$item->amount}} جنية مصري</td>
                            </tr>
                        @endforeach
                        
                    </tbody>
                    </table>
                </div>
            <!-- /.col -->
            </div>
            <!-- /.row -->

            <div class="row">
           
                <div class="col-md-6">
                    <p class="lead">تاريخ الطلب {{$order->created_at}}</p>
                    <div class="table-responsive">
                        <table class="table">
                            <tbody>
                            <tr>
                                <th style="width:50%">اجمالي المبلغ:</th>
                                <td>{{$order->amount}}</td>
                            </tr>
                            <tr>
                                <th>تكلفة الشحن</th>
                                <td>{{$order->shipping_fees}}</td>
                            </tr>
                            <!-- <tr>
                                <th>الخصم:</th>
                                <td>{{$order->discount_value}}</td>
                            </tr> -->
                            <tr>
                                <th>اجمالي:</th>
                                <td>{{$order->total_amount}}</td>
                            </tr>
                            </tbody>
                        </table>
                        @can('book-orders-change-status')
                        {!! $order->statusAction() !!}
                        @endcan
                    </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>
        $('.change-order-status').click(function(event) {
            event.preventDefault();
            const url = $(this).attr('href');
            const title = $(this).data('title');
            console.log(url);
            Swal.fire({
                title: "هل ترغب حقا في تحديث الحالة",
                text: "{{ trans('labels.you_wont_be_able_to_revert_this') }}",
                input: 'text',
                inputValue: title,
                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 <input type="hidden" name="title" value="' + result.value + '"> </form>').appendTo(
                        'body').submit();
                }
            });
        });

        $('#book').on('change', function(event){
            event.preventDefault();
            const url = $(this).attr('href');
            console.log(url);
            const val = $(this).val();
            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 <input type="hidden" name="book_id" value="' + val + '"> </form>').appendTo(
                        'body').submit();
                }
            });
        });

        $('select[name=gov_id]').on('change', function() {
            getCityByGov($(this).val());
        });

        function getCityByGov(id, city_id = null) {
            let url = '/get-areas/' + id;
            $.ajax({
                url: url,
                method: 'get',
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function(response) {
                    $('#city_id').empty();
                    $('#city_id').append(`
                            <option value="">{{ __('labels.choose') }} {{ __('labels.city') }} </option>
                            `);
                    $.each(response, function(index, area) {
                        var selected = '';
                        if (city_id) {
                            if (city_id == area.id) {
                                selected = 'selected'
                            }
                        }
                        if(area.is_valid == 1){
                            $('#city_id').append(`
                            <option value="${area.id}" ${selected}>${area.name}</option>
                            `);    
                        }else{
                            $('#city_id').append(`
                            <option value="${area.id}" disabled>${area.name} (خارج التغطية)</option>
                            `);
                        }
                        
                    });

                    console.log(response);
                },
                error: function() {
                    return false; //this will prevent to go to next step
                }
            });

        }
    </script>
@endsection