@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Process Shipment</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Order</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Order detail</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Order #{{$order_query->reference}}</div>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Process Shipment</div></a>
        </li>
    </ul>
</div>
<!-- add-new-user -->
<form method="POST" action="{{route('shop-bo.order.process-shipment.update',['order_id' => Crypt::encrypt($order_query->id)])}}" class="form-add-new-user form-style-2">
    @honeypot
    @csrf
    <div class="wg-box">
        <div class="left">
            <h5 class="mb-4">Shipment</h5>
            <div class="body-text mb-20">Fill in the to process the Shipment of the order below</div>
            <hr>
            <div class="summary-item mb-5">
                <div class="body-title">Order ID</div>
                <div class="body-text">{{$order_query->reference}}</div>
            </div>
            <div class="summary-item mb-5">
                <div class="body-title">Date</div>
                <div class="body-text">{{date('d M Y',strtotime($order_query->created_at))}}20 Nov 2023</div>
            </div>
            <div class="summary-item mb-5">
                <div class="body-title">Total</div>
                <div class="body-text tf-color-1">₱{{number_format($order_query->amount)}}</div>
            </div>
            <div class="body-title">Shipping Address</div>
            <div class="body-text mb-5">{{$order_query->shipping_details->address_1.", ".$order_query->shipping_details->address_2.", ".$order_query->shipping_details->barangay.", ".
                            $order_query->shipping_details->city.", ".$order_query->shipping_details->province}}</div>
            <div class="body-title">Payment Method</div>
            <div class="body-text">{{$order_query->shop_payment_methods_name}}</div>
        </div>
        <div class="right flex-grow">
            <div class="row">
                <div class="col-12">
                    <fieldset class="mb-24">
                        <div class="body-title mb-10">Courier</div>
                        <select class="flex-grow" type="text" placeholder="Courier" name="courier" tabindex="0" value="{{old('courier')}}" aria-required="true" required="" >
                            @foreach($couriers_query as $courier)
                                <option value="{{Crypt::encrypt($courier->id)}}">{{$courier->name}}</option>
                            @endforeach
                        </select>
                    </fieldset>
                </div>
                <div class="col-12">
                    <fieldset class="mb-24">
                        <div class="body-title mb-10">Tracking Number</div>
                        <input class="flex-grow" type="text" placeholder="Tracking Number" name="tracking_number" tabindex="0" value="{{old('tracking_number')}}" aria-required="true" required="">
                    </fieldset>
                </div>
                <div class="col-12">
                    <fieldset class="mb-24">
                        <div class="body-title mb-10">Estimated Delivery Date</div>
                        <input class="flex-grow" type="date" placeholder="Estimated Delivery Date" name="estimated_delivery_date" tabindex="0" value="{{old('estimated_delivery_date')}}">
                    </fieldset>
                </div>
            </div>
        </div>
    </div>

    <div class="bot">
        <button class="tf-button w180" type="submit">Process</button>
    </div>

</form>
<!-- /add-new-user -->

@endsection
@section('page_script')
@parent
<script>
    $(".order-menu").addClass("active");
    $(".order-detail").addClass("active");
</script>
@endsection
<!-- App js -->