@extends('backEnd.admin.layouts.master')

@section('title')
    Create Order
@endsection

@section('css')
    <link rel="stylesheet" href="{{asset('/')}}backEnd/assets/vendor/datetimepicker/bootstrap-datetimepicker.min.css">
    <style>
        .redx {
            display: none;
        }
    </style>
@endsection
@section('body')
    <div class="dashboard-wrapper">
        <div class="dashboard-ecommerce">
            <div class="container-fluid dashboard-content ">
                <!-- ============================================================== -->
                <!-- pageheader  -->
                <!-- ============================================================== -->
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="page-header">
                            <h2 class="pageheader-title">Create Order</h2>
                            <div class="page-breadcrumb">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a
                                                href="{{Auth::guard('admin')->check() ? route('admin.home') : (Auth::guard('manager')->check() ? route('manager.home') : (Auth::guard('employee')->check() ? route('employee.home') : ""))}}"
                                                class="breadcrumb-link">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Create Order</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- end pageheader  -->
                <!-- ============================================================== -->

                <div class="row mb-2">
                    <div class="col-12">
                        <a href="{{Auth::guard('admin')->check() ? route('admin.orders') : (Auth::guard('manager')->check() ? route('manager.orders') : (Auth::guard('employee')->check() ? route('employee.orders') : ""))}}"
                           class="btn btn-danger btn-sm">
                            <i class="fa fa-angle-double-left"></i>
                            Back
                        </a>
                    </div>
                </div>
                <form
                    action="{{Auth::guard('admin')->check() ? route('admin.orders.store') : (Auth::guard('manager')->check() ? route('manager.orders.store') : (Auth::guard('employee')->check() ? route('employee.orders.store') : ""))}}"
                    method="post">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="card">
                                <h4 class="card-header">Customer Info</h4>
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="form-group col-md-6 col-12">
                                            <label for="order_date">Order Date <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control datetimepicker" id="order_date" name="order_date" required>
                                        </div>

                                        <div class="form-group col-md-6 col-12">
                                            <label for="invoice_id">Invoice ID <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="invoice_id" name="invoice_id" value="{{$invoice_id}}" readonly required>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-6 col-12">
                                            <label for="customer_name">Customer Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="customer_name" name="customer_name" required>
                                        </div>

                                        <div class="form-group col-md-6 col-12">
                                            <label for="customer_phone">Customer Phone <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="customer_phone" name="customer_phone" required>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-12">
                                            <label for="customer_address">Customer Address <span class="text-danger">*</span></label>
                                            <textarea name="customer_address" id="customer_address" class="form-control"></textarea>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-12">
                                            <label for="courier_id">Courier Name</label>
                                            <select name="courier_id" id="courier_id" class="form-control select2">
                                                <option value="">Select A Courier</option>
                                                @foreach($courier as $key => $item)
                                                    <option value="{{$key}}">{{$item}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="pathao">
                                        <div class="form-row">
                                            <div class="form-group col-12">
                                                <label>City Name</label>
                                                <select name="courier_city_id" class="form-control select2 city_id">
                                                    <option value="">Select A City</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="form-group col-12">
                                                <label>Zone Name</label>
                                                <select name="courier_zone_id" class="form-control select2 zone_id">
                                                    <option value="">Select A Zone</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-12">
                                            <label for="status">Status</label>
                                            <select name="status" id="status" class="form-control" required>
                                                <option value="2">Processing</option>
                                                <option value="0">On Hold</option>
                                                <option value="3">Pending Payment</option>
                                                <option value="1">Delivered</option>
                                                <option value="4">Canceled</option>
                                                <option value="5">Pending Delivery</option>
                                                <option value="6">Pending Entry</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-12">
                            <div class="card">
                                <h4 class="card-header">Product Info</h4>
                                <div class="card-body">
                                    <div class="table-responsive mb-3">
                                        <table class="table table-bordered text-center">
                                            <thead>
                                            <tr>
                                                <th>SKU</th>
                                                <th>Product Name</th>
                                                <th>Qty</th>
                                                <th>Price</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody id="prod_row">
                                            </tbody>
                                            <tbody>
                                            <tr>
                                                <td colspan="5">
                                                    <div class="form-row">
                                                        <div class="form-group col-12 text-left">
                                                            <select id="product" class="form-control select2" required>
                                                                <option value="">Select A Product</option>
                                                                @foreach($products as $key=> $item)
                                                                    <option value="{{$key}}">{{$item}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="form-group row" style="padding: 6px 0;">

                                        <div class="form-group col-6 mb-0">
                                            <input type="text" class="form-control" id="memo_number" name="memo_number" placeholder="Memo Number">
                                        </div>

                                        <label for="sub_total" class="col-md-2 col-form-label text-right">Sub Total</label>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" id="sub_total" name="sub_total" min="0" value="0" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group row" style="padding: 6px 0;">
                                        <label for="shipping_cost" class="offset-md-6 col-md-2 col-form-label text-right">Delivery</label>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" id="shipping_cost" min="0" name="shipping_cost" value="0">
                                        </div>
                                    </div>

                                    <div class="form-group row" style="padding: 6px 0;">
                                        <label for="discount" class="offset-md-6 col-md-2 col-form-label text-right">Discount</label>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" id="discount" min="0" name="discount" value="0">
                                        </div>
                                    </div>

                                    <div class="form-group row" style="padding: 6px 0;">
                                        <label for="total" class="offset-md-6 col-md-2 col-form-label text-right">Total</label>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" id="total" min="0" name="total" value="0" readonly>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-12">
                                            <textarea name="order_note" id="order_note" class="form-control" placeholder="Order Note"></textarea>
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-12 text-center">
                                            <input type="submit" value="Save" class="btn btn-success w-100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script src="{{asset('/')}}backEnd/assets/vendor/datetimepicker/moment.min.js"></script>
    <script src="{{asset('/')}}backEnd/assets/vendor/datetimepicker/bootstrap-datetimepicker.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.datetimepicker').datetimepicker({
                icons:
                    {
                        next: 'fa fa-angle-right',
                        previous: 'fa fa-angle-left'
                    },
                format: 'DD-MM-YYYY',
                defaultDate: new Date(),
            });

            $('.select2').select2();

            $('#product').on('change', function () {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    url: '{{Auth::guard('admin')->check() ? route('admin.ajax.get.products') : (Auth::guard('manager')->check() ? route('manager.ajax.get.products') : (Auth::guard('employee')->check() ? route('employee.ajax.get.products') : ""))}}',
                    type: 'POST',
                    data: {_token: CSRF_TOKEN, id: $(this).val()},
                    success: function (data) {
                        $('#prod_row').append(data);
                        finalCalc();
                    }
                });
            });

            function pathao_input_off() {
                $('.pathao').find('.city_id').prop('disabled', true);
                $('.pathao').find('.zone_id').prop('disabled', true);
            }

            function pathao_input_on() {
                $('.pathao').find('.city_id').prop('disabled', false);
                $('.pathao').find('.zone_id').prop('disabled', false);
            }

            function redx_input_off() {
                $('.redx').find('.city_id').prop('disabled', true);
            }

            function redx_input_on() {
                $('.redx').find('.city_id').prop('disabled', false);
            }

            $("#courier_id").on('change', function () {
                $(".city_id").empty();
                $(".city_id").append('<option>Loading...</option>');
                $(".zone_id").empty();
                $(".zone_id").append('<option value="">Select A Zone</option>');
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

                if ($(this).val() == 1) {
                    $('.pathao').css('display', 'block');
                    $('.redx').css('display', 'none');
                    pathao_input_on();
                    redx_input_off();
                    $.ajax({
                        url: '{{Auth::guard('admin')->check() ? route('admin.courier.pataho.ajax.get.cities') : (Auth::guard('manager')->check() ? route('manager.courier.pataho.ajax.get.cities') : (Auth::guard('employee')->check() ? route('employee.courier.pataho.ajax.get.cities') : ""))}}',
                        type: 'POST',
                        data: {_token: CSRF_TOKEN, id: $(this).val()},
                        success: function (data) {
                            $(".city_id").empty();
                            $(".city_id").append('<option value="">Select A City</option>');
                            $.each(data, function (index, value) {
                                $(".pathao .city_id").append(new Option(value, index));
                            });

                        }
                    });
                }else {
                    $('.pathao').css('display', 'block');
                    $('.redx').css('display', 'none');
                    pathao_input_on();
                    redx_input_off();
                    $.ajax({
                        url: '{{Auth::guard('admin')->check() ? route('admin.courier.ajax.get.cities') : (Auth::guard('manager')->check() ? route('manager.courier.ajax.get.cities') : (Auth::guard('employee')->check() ? route('employee.courier.ajax.get.cities') : ""))}}',
                        type: 'POST',
                        data: {_token: CSRF_TOKEN, id: $(this).val()},
                        success: function (data) {
                            $(".city_id").empty();
                            $(".city_id").append('<option value="">Select A City</option>');
                            $.each(data, function (index, value) {
                                $(".city_id").append(new Option(value, index));
                            });

                        }
                    });

                }


                /*var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    url: '{{Auth::guard('admin')->check() ? route('admin.courier.ajax.get.c_charge') : (Auth::guard('manager')->check() ? route('manager.courier.ajax.get.c_charge') : (Auth::guard('employee')->check() ? route('employee.courier.ajax.get.c_charge') : ""))}}',
                    type: 'POST',
                    data: {_token: CSRF_TOKEN, id: $(this).val()},
                    success: function (data) {
                        $('#shipping_cost').val(data);
                        finalCalc();
                    }
                });
*/
            });


            $(".city_id").on('change', function () {
                $(".zone_id").empty();
                $(".zone_id").append('<option>Loading...</option>');
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                if ($('#courier_id').val() == 1) {
                    $.ajax({
                        url: '{{Auth::guard('admin')->check() ? route('admin.courier.pataho.ajax.get.zones') : (Auth::guard('manager')->check() ? route('manager.courier.pataho.ajax.get.zones') : (Auth::guard('employee')->check() ? route('employee.courier.pataho.ajax.get.zones') : ""))}}',
                        type: 'POST',
                        data: {_token: CSRF_TOKEN, id: $(this).val()},
                        success: function (data) {
                            $(".zone_id").empty();
                            $(".zone_id").append('<option value="">Select A Zone</option>');
                            $.each(data, function (index, value) {
                                $(".zone_id").append(new Option(value, index));
                            });

                        }
                    });
                } else {
                    $.ajax({
                        url: '{{Auth::guard('admin')->check() ? route('admin.courier.ajax.get.zones') : (Auth::guard('manager')->check() ? route('manager.courier.ajax.get.zones') : (Auth::guard('employee')->check() ? route('employee.courier.ajax.get.zones') : ""))}}',
                        type: 'POST',
                        data: {_token: CSRF_TOKEN, id: $(this).val()},
                        success: function (data) {
                            $(".zone_id").empty();
                            $(".zone_id").append('<option value="">Select A Zone</option>');
                            $.each(data, function (index, value) {
                                $(".zone_id").append(new Option(value, index));
                            });

                        }
                    });
                }

            });
        });
    </script>
@endsection