@extends('admin.app')
@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">Sipariş</h2>
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Ana Sayfa</a>
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('get-order-list')}}">Siparişler</a>
                                    </li>
                                    <li class="breadcrumb-item active">Sipariş #{{$order->id}}
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body" style="max-width: 1000px; margin: auto;">
                <!-- invoice page -->
                <section class="card invoice-page">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="{{route('post-order-form')}}" method="POST">
                        {{csrf_field()}}
                        <input type="hidden" name="id" value="{{$order->id}}">
                        <div id="invoice-template" class="card-body">
                            <!-- Invoice Company Details -->
                            <div id="invoice-company-details" class="row">
                                <div class="col-sm-6 col-12 text-left pt-1">
                                    <div class="media pt-1">
                                        <img src="../../../app-assets/images/logo/logo.png" style="width: 77px;height: auto" alt="company logo">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-12 text-right">
                                    <!-- <h1>Invoice</h1> -->
                                    <div class="invoice-details mt-2">
                                        <h6>SİPARİŞ NO.</h6>
                                        <p>{{$order->id}}</p>
                                        <h6 class="mt-2">SİPARİŞ TARİHİ</h6>
                                        <p>{{date('d/m/Y H:i',strtotime($order->created_at))}}</p>
                                    </div>
                                </div>
                            </div>
                            <!--/ Invoice Company Details -->

                            <!-- Invoice Recipient Details -->
                            <div id="invoice-customer-details" class="row pt-2">
                                <div class="col-sm-4 col-12 text-left">
                                    <h5>Sipariş Detayları</h5>
                                    <div class="recipient-info my-2">
                                        <p>Ödeme Yöntemi:
                                            <select name="payment_id" class="form-control">
                                                @foreach($payments as $payment)
                                                    <option @if($payment->id == $order->payment_id) selected @endif value="{{$payment->id}}">{{$payment->name}}</option>
                                                @endforeach
                                            </select>
                                        </p>
                                        <p>Kargo:  <select name="shipping_id" class="form-control">
                                                @foreach($shippings as $shipping)
                                                    <option @if($shipping->id == $order->shipping_id) selected @endif value="{{$shipping->id}}">{{$shipping->shipping_name}}</option>
                                                @endforeach
                                            </select></p>
                                    </div>
                                </div>
                                <div class="col-sm-8 col-12 text-right">
                                    <h5>Müşteri</h5>
                                    <div class="row">
                                        <div class="col-8">
                                            <p><input type="text" name="customer_name" placeholder="Müşteri Adı-Soyadı" value="{{$order->customer_name ? $order->customer_name : old('customer_name')}}"
                                                      class="form-control"></p>
                                            <p><textarea class="form-control"
                                                         name="address" placeholder="Müşteri Adresi">{{$order->address ? $order->address : old('address')}}</textarea></p>
                                            <p>
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <select name="city_id" id="city" class="form-control select2">
                                                        <option value="">Seçiniz</option>
                                                        @foreach($cities as $city)
                                                            <option @if($city->id == $order->city_id) selected @endif value="{{$city->id}}">{{$city->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-sm-4">
                                                    <select name="district_id" id="district" class="form-control select2">
                                                        <option value="">Seçiniz</option>
                                                        @foreach($districts as $district)
                                                            <option @if($district->id == $order->district_id) selected @endif
                                                                value="{{$district->id}}">{{$district->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-sm-4">
                                                    <select name="country_id" class="form-control select2">
                                                        @foreach($countries as $country)
                                                            <option @if($country->id == 212) selected @endif value="{{$country->id}}">{{$country->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            </p>
                                        </div>

                                        <div class="col-4">
                                            <div class="company-contact">
                                                <p>
                                                    <i class="feather icon-mail"></i>
                                                    <input name="email" placeholder="Müşteri Email" class="form-control" type="email"
                                                           value="{{$order->email ? $order->email : old('email')}}">
                                                </p>
                                                <p>
                                                    <i class="feather icon-phone"></i>
                                                    <input name="mobile_phone" placeholder="Müşteri Telefon" class="form-control" id="phone"
                                                           value="{{$order->mobile_phone ? $order->mobile_phone : old('mobile_phone')}}">
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Invoice Recipient Details -->

                            <!-- Invoice Items Details -->
                            <div id="invoice-items-details" class="pt-1 invoice-items-table">
                                <div class="row">
                                    <div class="table-responsive col-12">
                                        <table class="table table-borderless">
                                            <thead>
                                            <tr>
                                                <th>Ürün</th>
                                                <th>Ürün Kodu</th>
                                                <th>Adet</th>
                                                <th>Birim Fiyat</th>
                                                <th>Tutar</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody id="products">
                                            @foreach($order->products as $product)
                                                <tr>
                                                    <td> {{$product->product_name}}</td>
                                                    <td>{{$product->product->stock_code}}</td>
                                                    <td><input type="number" min="1" name="products[{{$product->product_id}}]"
                                                               class="form-control" value="{{$product->quantity}}"></td>
                                                    <td>{{number_format(round($product->product_price,2),2)}}₺</td>
                                                    <td>{{number_format(round($product->product_total,2),2)}}₺</td>
                                                    <td><button type="button" onclick="$(this).parent('td').parent('tr').remove()" class="btn btn-sm btn-danger"><i class="fa fa-remove"></i></button></td>
                                                </tr>
                                            @endforeach
                                            <tr id="addprd">
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td><button type="button" id="add-product" class="btn btn-sm btn-success" data-toggle="modal" data-target="#product-modal"><i class="fa fa-plus"></i></button></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div id="invoice-total-details" class="invoice-total-table">
                                <div class="row">
                                    <div class="col-6 offset-6">
                                        <div class="table-responsive">
                                            <table class="table table-borderless">
                                                <tbody>
                                                <tr>
                                                    <th>Ürün Toplam</th>
                                                    <td>{{$order->total_price}}₺</td>
                                                </tr>
                                                <tr>
                                                    <th>KDV</th>
                                                    <td>{{$order->total_tax}}₺</td>
                                                </tr>
                                                @foreach($order->totals as $total)
                                                    <tr>
                                                        <th>{{$total->name}}</th>
                                                        <td>{{$total->price}}₺</td>
                                                    </tr>
                                                @endforeach
                                                <tr>
                                                    <th>Toplam</th>
                                                    <td>{{$order->total_order}}₺</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>Not</label>
                                            <fieldset class="form-group">
                                                <textarea name="order_note" class="form-control" id="order-note"
                                                          rows="3"
                                                          placeholder="Sipariş Notu (Müşteriye Gözükmeyecektir)">{{$order->order_note}}</textarea>
                                            </fieldset>
                                            <div class="help-block"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                        <label>Sipariş Durumu</label>
                                        <select class="form-control" id="order-status" name="order_status_id">
                                            @foreach($order_status as $os)
                                                <option value="{{$os->id}}"
                                                        @if($os->id == $order->order_status_id) selected @endif>{{$os->status_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Müşteri Grubu</label>
                                        <select name="user_group_id" class="form-control">
                                            <option>Seçiniz</option>
                                            @foreach($user_groups as $group)
                                                <option @if($group->id == 12) selected @endif value="{{$group->id}}">{{$group->group_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
                                        <button type="submit"
                                                class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1 waves-effect waves-light">
                                            Kaydet
                                        </button>
                                    </div>
                                </div>

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

                <div class="modal fade" id="product-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <form id="add-product-form">
                                    {{csrf_field()}}
                                <div class="form-group">
                                    <label>Ürün</label>
                                    <select name="add_product_id" class="s2-ajax form-control" style="width: 100%">
                                        <option>Seçiniz</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Adet</label>
                                    <input name="add_product_quantity" type="number" value="1" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Müşteri Grubu</label>
                                    <select name="add_product_user_group" class="form-control">
                                        <option>Seçiniz</option>
                                        @foreach($user_groups as $group)
                                            <option @if($group->id == 12) selected @endif value="{{$group->id}}">{{$group->group_name}}</option>
                                            @endforeach
                                    </select>
                                </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
                                <button type="button" id="add-product-button" class="btn btn-primary">Ekle</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/forms/select/select2.min.css')}}">
@endsection
@section('js')

    <!-- BEGIN: Page JS-->
    <script src="{{asset('app-assets/vendors/js/forms/select/select2.full.min.js')}}"></script>

    <script type="text/javascript">
        $('.select2').select2();
</script>
        <script>
        $('.s2-ajax').select2({
            ajax: {
                url: '{{route('ajax-get-product-search')}}',
                dataType: 'json'
            }
        });
    </script>
    <script>
        $('#add-product-button').on('click',function () {
            $.post('{{route('ajax-get-product-for-order-form')}}',$('#add-product-form').serialize(),function (response) {
               if (response.status == 'success'){
                   var html = '        <tr>\n' +
                       '                                                <td>'+response.product.name+'</td>\n' +
                       '                                                <td>'+response.product.stock_code+'</td>\n' +
                       '                                                <td><input class="form-control" value="'+response.product.quantity+'" name="products['+response.product.id+']"></td>\n' +
                       '                                                <td>'+response.product.price+'</td>\n' +
                       '                                                <td>'+response.product.total+'</td>\n' +
                       '                                               <td><button type="button" onclick="$(this).parent(\'td\').parent(\'tr\').remove()" class="btn btn-sm btn-danger"><i class="fa fa-remove"></i></button></td>'+
                       '                                            </tr>';
                   $('#addprd').before(html);
                   $('#product-modal').modal('hide');
               }
            });
        })
    </script>
    <script>
        $('#city').on('change',function () {
            $.get('{{route('get-districts','')}}/'+$(this).children("option:selected").val(),function (response) {
                var html = '<option value="">{{__('general.user-profile.select_district')}}</option>';
                if(response.status == 'success'){
                    $.each(response.districts,function (index,value) {
                        html += '<option value="'+value.id+'">'+value.name+'</option>';
                    });
                    $('#district').html(html);
                }
            });
        })

    </script>
    <script src="{{asset('customer/js/jquery.maskedinput.js')}}"></script>
    <script>
        jQuery(function($) {
            $("#phone").mask('+90(XXX)XXX-XXXX');
        })

@endsection