@extends('admin.layouts.app', [
    'title' => 'Edit ' . $tnm,
    'header' => true,
    'aside' => true,
])
@push('style')
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css'>
@endpush
@section('content')
    <main id="main" class="main">
        <form class="section dashboard" id="ajax-form">
            <div class="row">
                @include('admin.components.title-bar', [
                    'name' => 'Edit ' . $tnm,
                    'routeName' => $rnm,
                    'submit' => true,
                ])
                @stack('title-bar-form')
                <div class="col-12 col-sm-8">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">
                                Customer information
                            </h5>
                            <div class="row gy-2">
                                <div class="col-3">
                                    <img src="{{ $order->user->getImage('image', 'x200') }}" class="img-fluid rounded-2"
                                        alt="{{ $order->name }}">
                                </div>
                                <div class="col-9">
                                    <div>Name: <b>{{ @$order->user->name }}</b> </div>
                                    <div>Email: <b>{{ @$order->user->email }}</b> </div>
                                    <div>Phone: <b>{{ @$order->user->phone }}</b> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if ($order->creator)
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Booking poster information
                                </h5>
                                <div class="row gy-2">
                                    <div class="col-3">
                                        <div><img
                                                src="{{ $order->creator ? $order->creator->getImage('image', 'x200') : '#' }}"
                                                class="img-fluid rounded-2" alt="{{ $order->name }}"></div>

                                    </div>
                                    <div class="col-9">
                                        <div>Name: <b>{{ @$order->creator->name }}</b> </div>
                                        <div>Email: <b>{{ @$order->creator->email }}</b> </div>
                                        <div>Phone: <b>{{ @$order->creator->phone }}</b> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif


                    @if ($order->partner)
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Partner information
                                </h5>
                                <div class="row gy-2">
                                    <div class="col-3">
                                        <div><img
                                                src="{{ $order->partner ? $order->partner->getImage('image', 'x200') : '#' }}"
                                                class="img-fluid rounded-2" alt="{{ $order->name }}"></div>

                                    </div>
                                    <div class="col-9">
                                        <div>Name: <b>{{ @$order->partner->name }}</b> </div>
                                        <div>Email: <b>{{ @$order->partner->email }}</b> </div>
                                        <div>Phone: <b>{{ @$order->partner->phone }}</b> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if ($order->driver)
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Driver information
                                </h5>
                                <div class="row gy-2">
                                    <div class="col-3">
                                        <div><img
                                                src="{{ $order->driver ? $order->driver->getImage('image', 'x200') : '#' }}"
                                                class="img-fluid rounded-2" alt="{{ $order->name }}"></div>

                                    </div>
                                    <div class="col-9">
                                        <div>Name: <b>{{ @$order->driver->name }}</b> </div>
                                        <div>Email: <b>{{ @$order->driver->email }}</b> </div>
                                        <div>Phone: <b>{{ @$order->driver->phone }}</b> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if ($order->driver)
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Driver car information
                                </h5>
                                <div class="row gy-2">
                                    <div class="col-3">
                                        <div><img
                                                src="{{ $order->partnerProduct ? $order->partnerProduct->getImage('front_image', 'x200') : '#' }}"
                                                class="img-fluid rounded-2" alt="{{ $order->name }}"></div>

                                    </div>
                                    <div class="col-3">
                                        <div><img
                                                src="{{ $order->partnerProduct ? $order->partnerProduct->getImage('back_image', 'x200') : '#' }}"
                                                class="img-fluid rounded-2" alt="{{ $order->name }}"></div>

                                    </div>
                                    <div class="col-6">
                                        <div>Name: <b>{{ @$order->partnerProduct->name }}</b> </div>
                                        <div>Vehicle No: <b>{{ @$order->partnerProduct->vehicle_no }}</b> </div>
                                        <div>Total Seats: <b>{{ @$order->partnerProduct->total_seats }}</b> </div>
                                        @if (@$order->partnerProduct->model)
                                            <div>Model: <b>{{ @$order->partnerProduct->model->name }}</b> </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if ($partners->count())
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Select Partner
                                </h5>
                                <div class="col-12">
                                    <select name="partner_id" class="form-control select2 rounded-0"
                                        data-placeholder="Choose a partner">
                                        <option value="">-- Choose a partner --</option>
                                        @foreach ($partners as $item)
                                            <option value="{{ $item->id }}"
                                                {{ $item->id == $order->partner_id ? 'selected' : '' }}>
                                                {{ $item->phone . ' - ' . $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">
                                Select Driver
                            </h5>
                            <div class="col-12">
                                <select name="driver_id" class="form-control select2 rounded-0"
                                    data-placeholder="Choose a driver">
                                    <option value="">-- Choose a driver --</option>
                                    @if ($drivers->count())
                                        @foreach ($drivers as $item)
                                            <option value="{{ $item->id }}"
                                                {{ $item->id == $order->driver_id ? 'selected' : '' }}>
                                                {{ $item->phone . ' - ' . $item->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">
                                Select Car
                            </h5>
                            <div class="col-12">
                                <select name="partner_product_id" class="form-control select2 rounded-0"
                                    data-placeholder="Choose a car">
                                    <option value="">-- Choose a car --</option>
                                    @if ($partnerProducts->count())
                                        @foreach ($partnerProducts as $item)
                                            <option value="{{ $item->id }}"
                                                {{ $item->id == $order->partner_product_id ? 'selected' : '' }}>
                                                {{ $item->phone . ' - ' . $item->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="card base-product wrapper-form">
                        <div class="card-body">
                            <h5 class="card-title">
                                Trip details
                            </h5>
                            <div class="row gy-2">
                                <div class="col-12">
                                    <ul class="trip-types">
                                        <li class="active" data-trip="out-station">Out Station</li>
                                        <li data-trip="local">Local / Rental</li>
                                    </ul>
                                </div>
                                <div class="col-12 out-station" {!! !in_array($order->type, ['One Way Trip', 'Round Trip']) ? 'style="display:none"' : '' !!}>
                                    <div class="row gx-4">
                                        <div class="col-6">
                                            <div class="trip-option active">
                                                <div class="form-check">
                                                    <input class="form-check-input p-2" type="radio" value="1"
                                                        name="out_station" checked>
                                                    <label class="form-check-label ps-2 fs-5">
                                                        One Way Trip
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="trip-option">
                                                <div class="form-check">
                                                    <input class="form-check-input p-2" type="radio" value="2"
                                                        name="out_station">
                                                    <label class="form-check-label ps-2 fs-5">
                                                        Round Trip
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 local" {!! !in_array($order->type, ['Local / Rental Trip', 'Airport Transfer']) ? 'style="display:none"' : '' !!}>
                                    <div class="row gx-4">
                                        <div class="col-6">
                                            <div class="trip-option active">
                                                <div class="form-check">
                                                    <input class="form-check-input p-2" type="radio" value="3"
                                                        name="local" checked>
                                                    <label class="form-check-label ps-2 fs-5">
                                                        Local / Rental
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="trip-option">
                                                <div class="form-check">
                                                    <input class="form-check-input p-2" type="radio" value="4"
                                                        name="local">
                                                    <label class="form-check-label ps-2 fs-5">
                                                        Airport Transfer
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 text-center">
                                    @stack('tags')
                                </div>
                                <div class="col-12 inputs">
                                    <div class="row gy-4">
                                        <div class="col-12 pickup">
                                            <label for=""><b>PICK-UP ADDRESS</b></label>
                                            <input type="text" name="pickup" id="pickup"
                                                class="form-control shadow-none"
                                                placeholder="City, Airport, Station, etc." style="display:none" />
                                            <div id="render-pickup"></div>
                                        </div>

                                        <div class="col-12 drop">
                                            <label for=""><b>STOP ADDRESS</b></label>
                                            <div id="render-drops"></div>
                                            <input type="text" name="drop" id="drop"
                                                class="form-control shadow-none" placeholder="NEXT STOP ADDRESS"
                                                {!! $order->trip != '3' ? 'style="display:none"' : '' !!} />

                                            <button type="button" id="add-stop-address"
                                                class="btn btn-outline-secondary mt-2 rounded-3 float-end btn-sm">+
                                                Add
                                                Stop Address</button>
                                        </div>
                                        @if ($localPackages->count())
                                            <div class="col-12 package" style="display:none">
                                                <label for=""><b>Package</b></label>
                                                <select class="form-control shadow-none" name="package_id">
                                                    <option value="" selected="" disabled>---
                                                        Select
                                                        Package --- </option>
                                                    @foreach ($localPackages as $item)
                                                        <option value="{{ $item->id }}"
                                                            {{ $item->id = $order->package_id ? 'selected' : '' }}>
                                                            {{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endif

                                        @if ($cities->count())
                                            <div class="col-12 city" style="display:none">
                                                <label for=""><b>City</b></label>
                                                <select class="form-control shadow-none" name="city_id">
                                                    <option value="" selected="" disabled>---
                                                        Select
                                                        City --- </option>
                                                    @foreach ($cities as $item)
                                                        <option value="{{ $item->id }}"
                                                            {{ $item->id = $order->city_id ? 'selected' : '' }}>
                                                            {{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endif

                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for=""><b>Name</b></label> <br>
                                    <input type="text" name="name" class="form-control shadow-none"
                                        value="{{ $order->name }}" />
                                </div>
                                <div class="col-12">
                                    <label for=""><b>Email</b></label> <br>
                                    <input type="email" name="email" class="form-control shadow-none"
                                        value="{{ $order->email }}" />
                                </div>
                                <div class="col-12">
                                    <label for=""><b>CONTACT NO.</b></label> <br>
                                    <input type="tel" data-error=".phone-error" name="phone"
                                        class="form-control shadow-none phone-number" placeholder="CONTACT NO."
                                        pattern="[1-9]{1}[0-9]{9}" value="{{ $order->phone }}" />
                                    <div class="phone-error"></div>
                                </div>
                                <div class="col-6">
                                    <label for=""><b>Start date</b></label>
                                    <input type="date" name="start_date"class="form-control set-date shadow-none"
                                        placeholder="Start date" value="{{ $order->start_date->format('Y-m-d') }}" />
                                </div>
                                <div class="col-6">
                                    <label for=""><b>Start time</b></label>
                                    <input type="time" name="start_time"class="form-control set-date shadow-none"
                                        placeholder="Start time" value="{{ $order->start_time->format('H:i') }}" />
                                </div>
                                <div class="col-6 end-date" style="display: none;">
                                    <label for=""><b>End date</b></label>
                                    <input type="date" name="end_date"class="form-control set-date shadow-none"
                                        placeholder="End date" value="{{ $order->end_date->format('Y-m-d') }}" />
                                </div>
                                <div class="col-6 end-time" style="display: none;">
                                    <label for=""><b>End time</b></label>
                                    <input type="time" name="end_time"class="form-control set-date shadow-none"
                                        placeholder="End time" value="{{ $order->end_time->format('H:i') }}" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card base-product">
                        <div class="card-body">
                            <h5 class="card-title">
                                Cab Details
                            </h5>
                            <div class="row justify-content-center align-items-center">
                                <div class="col-12 col-sm-3 position-relative">
                                    <img src="{{ $order->image }}" class="img-fluid rounded-2"
                                        alt="{{ $order->name }}">
                                </div>
                                <div class="col-12 col-sm-9">
                                    <div class="col-12">
                                        <select class="form-control shadow-none" name="product_id">
                                            <option value="" selected="" disabled>---
                                                Select
                                                Product --- </option>
                                            @foreach ($products as $item)
                                                <option value="{{ $item->id }}"
                                                    {{ $item->id == $order->product_id ? 'selected' : '' }}>
                                                    {{ $item->name }} -
                                                    [{{ implode(', ', $item->collections->pluck('name')->toArray()) }}]
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-12 col-sm-6">
                                            <label class="form-label">Extra price/ KM</label>
                                            <input type="number" class="form-control" name="extra_per_km"
                                                value="{{ $order->extra_per_km }}">
                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <label class="form-label">Total seats</label>
                                            <input type="number" class="form-control" name="total_seats"
                                                value="{{ $order->total_seats }}">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Toll</label>
                                            <select name="toll" class="form-control">
                                                <option value="Included"
                                                    {{ $order->toll == 'Included' ? 'selected' : '' }}>
                                                    Included
                                                </option>
                                                <option value="Excluded"
                                                    {{ $order->toll == 'Excluded' ? 'selected' : '' }}>
                                                    Excluded</option>
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Tax</label>
                                            <select name="tax" class="form-control">
                                                <option value="Included"
                                                    {{ $order->tax == 'Included' ? 'selected' : '' }}>
                                                    Included
                                                </option>
                                                <option value="Excluded"
                                                    {{ $order->tax == 'Excluded' ? 'selected' : '' }}>
                                                    Excluded</option>
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Night charges</label>
                                            <select name="night_charges" class="form-control">
                                                <option value="Included"
                                                    {{ $order->night_charges == 'Included' ? 'selected' : '' }}>
                                                    Included
                                                </option>
                                                <option value="Excluded"
                                                    {{ $order->night_charges == 'Excluded' ? 'selected' : '' }}>
                                                    Excluded</option>
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Driver allowance</label>
                                            <select name="driver_allowance" class="form-control">
                                                <option value="Included"
                                                    {{ $order->driver_allowance == 'Included' ? 'selected' : '' }}>
                                                    Included
                                                </option>
                                                <option value="Excluded"
                                                    {{ $order->driver_allowance == 'Excluded' ? 'selected' : '' }}>
                                                    Excluded</option>
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Parking</label>
                                            <select name="parking" class="form-control">
                                                <option value="Included"
                                                    {{ $order->parking == 'Included' ? 'selected' : '' }}>
                                                    Included
                                                </option>
                                                <option value="Excluded"
                                                    {{ $order->parking == 'Excluded' ? 'selected' : '' }}>
                                                    Excluded</option>
                                            </select>
                                        </div>

                                        <div class="col-6">
                                            <label class="form-label">Total Kms</label>
                                            <input type="number" class="form-control" name="distance"
                                                value="{{ $order->distance }}">
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label">Cancellation</label>
                                            <input type="text" class="form-control" name="cancellation"
                                                value="{{ $order->cancellation }}">
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label">Description</label>
                                            <textarea id="textarea" class="form-control" name="description" placeholder="Description" rows="3">{{ $order->description }}</textarea>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label">Note</label>
                                            <textarea class="form-control" name="note" placeholder="Any note?" rows="2">{{ $order->note }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card border-0 rounded-0 bg-light p-lg-4">
                        <h5 class="text-uppercase mb-4">Payment SUMMARY <span
                                class="badge bg-success float-end">{{ $order->payment_mode }}</span></h5>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                <li class="d-flex align-items-center justify-content-between"><strong
                                        class="text-uppercase small font-weight-bold">Subtotal</strong> <input
                                        type="number" name="subtotal" class="form-control shadow-none w-50"
                                        value="{{ $order->subtotal }}" />
                                </li>
                                <li class="my-3"></li>
                                <li class="d-flex align-items-center justify-content-between"><strong
                                        class="text-uppercase small font-weight-bold">Paid Amount
                                        ({{ $order->payment_mode }})</strong>
                                    <input type="number" name="paid_amount" class="form-control shadow-none w-50"
                                        value="{{ $order->paid_amount }}" />
                                </li>

                                <li class="my-3"></li>
                                <li class="d-flex align-items-center justify-content-between"><strong
                                        class="text-uppercase small font-weight-bold">Discount</strong><input
                                        type="number" name="discount" class="form-control shadow-none w-50"
                                        value="{{ $order->discount }}" />
                                </li>

                                <li class="my-3"></li>
                                <li class="d-flex align-items-center justify-content-between">
                                    <div class="w-50">
                                        <strong class="text-uppercase small font-weight-bold">Coupon Discount
                                            {{ $order->coupon_code ? '(' . $order->coupon_code . ')' : '' }}</strong>
                                    </div>
                                    <input type="text" name="coupon_code" class="form-control shadow-none w-25"
                                        value="{{ $order->coupon_discount }}" />
                                    <input type="number" name="coupon_discount" class="form-control shadow-none w-25"
                                        value="{{ $order->coupon_discount }}" />

                                </li>

                                <li class="my-3"></li>
                                <li class="d-flex align-items-center justify-content-between mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input shadow-none" name="gst" type="checkbox"
                                            value="1" {{ $order->gst_amount ? 'checked' : '' }}>
                                        <label class="form-check-label">
                                            GST
                                            ({{ config('company.gst_charge') }} %)
                                        </label>
                                    </div>
                                    <span class="text-success small">
                                        {{ $order->gst_amount ? '-' . getAmount($order->gst_amount) : 'NA' }}</span>
                                </li>

                                <li>
                                    <hr>
                                </li>
                                <li class="d-flex align-items-center justify-content-between mb-4"><strong
                                        class="text-uppercase small font-weight-bold">Total Amount</strong><span
                                        class="text-primary">{{ getAmount($order->total) }}</span>
                                </li>
                                @if ($order->due_amount)
                                    <li>
                                        <hr>
                                    </li>
                                    <li class="d-flex align-items-center justify-content-between mb-4"><strong
                                            class="text-uppercase small font-weight-bold">Payable Amount</strong><span
                                            class="text-primary">{{ getAmount($order->due_amount) }}</span>
                                    </li>
                                @endif
                        </div>
                    </div>
                    @if ($order->transactions->count())
                        <div class="card">
                            <div class="card-body">
                                <h5 class="fs-6 fw-medium mb-4">Transactions</h5>
                                <div class="row gy-4">
                                    <div class="col-12">
                                        <ul class="list-group">
                                            @foreach ($order->transactions as $item)
                                                <li class="list-group-item">
                                                    <div>
                                                        {{ $item->status }}</div>
                                                    <div class="text-muted">{!! $item->description !!} </div>
                                                    <div class=" text-muted">
                                                        {{ $item->created_at->format('h:i A @ j M, Y') }}</div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    <a href="tel:"></a>
                    @if ($order->histories->count())
                        <div class="card">
                            <div class="card-body">
                                <h5 class="fs-6 fw-medium mb-4">Histories</h5>
                                <div class="row gy-4">
                                    <div class="col-12">
                                        <ul class="list-group">
                                            @foreach ($order->histories as $key => $item)
                                                <li class="list-group-item">
                                                    <div>{!! $item->message !!}</div>
                                                    <div class=" text-muted">
                                                        {{ $item->created_at->format('h:i A @ j M, Y') }}</div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-12 col-sm-4">
                    <div class="position-sticky" style="top:11%;">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Status
                                </h5>
                                <div>
                                    <select name="status" class="form-control">
                                        <option value="Booking Pending"
                                            {{ $order->status == 'Booking Pending' ? 'selected' : '' }}>
                                            Booking Pending
                                        </option>
                                        <option value="Booking Confirmed"
                                            {{ $order->status == 'Booking Confirmed' ? 'selected' : '' }}>
                                            Booking Confirmed</option>
                                        <option value="Booking Accepted"
                                            {{ $order->status == 'Booking Accepted' ? 'selected' : '' }}>
                                            Booking Accepted</option>
                                        <option value="Booking Completed"
                                            {{ $order->status == 'Booking Completed' ? 'selected' : '' }}>
                                            Booking Completed</option>
                                        <option value="Booking Cancelled"
                                            {{ $order->status == 'Booking Cancelled' ? 'selected' : '' }}>
                                            Booking Cancelled</option>
                                        <option value="Booking Refunded"
                                            {{ $order->status == 'Booking Refunded' ? 'selected' : '' }}>
                                            Booking Refunded</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Booking Commission
                                </h5>
                                <div>
                                    <input type="text" class="form-control" name="commission"
                                        value="{{ $order->commission }}">
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Rewards
                                </h5>
                                <div>
                                    <input type="number" class="form-control" name="rewards"
                                        value="{{ $order->rewards }}">
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Show in app
                                </h5>
                                <div>
                                    <select name="show_in_app" class="form-control">
                                        <option value="Yes" {{ $order->show_in_app == 'Yes' ? 'selected' : '' }}>
                                            Yes
                                        </option>
                                        <option value="No" {{ $order->show_in_app == 'No' ? 'selected' : '' }}>
                                            No</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Payment mode
                                </h5>
                                <div class="row gy-2">
                                    <div class="col-12">
                                        <select name="payment_mode" class="form-control">
                                            <option value="Online"
                                                {{ $order->payment_mode == 'Online' ? 'selected' : '' }}>
                                                Online
                                            </option>
                                            <option value="Offline"
                                                {{ $order->payment_mode == 'Offline' ? 'selected' : '' }}>
                                                Offline</option>
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label for=""><b>Payment confirmed</b></label>
                                        <input type="text" name="payment_confirmed" class="form-control shadow-none"
                                            value="{{ $order->payment_confirmed }}" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if (Route::has($rnm . '.media'))
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-title">Image</div>
                                    <input type="file" name="image" class="form-control" accept="image/*">
                                    @if ($order->getImage('image', 'x200'))
                                        <div class="mt-3 position-relative">
                                            <button type="button"
                                                class="ml-1 btn btn-sm btn-danger shadow-sm position-absolute end-0 destroy-media"
                                                data-id="{{ $order->id }}" data-media="image"><i
                                                    class="bi bi-trash"></i></button>
                                            <img class="img-account-profile img-fluid mb-2"
                                                src="{{ $order->getImage('image', 'x200') }}" alt="">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </main>
@endsection

@push('script')
    @stack('media-script')
    @stack('text-area')
    @stack('select2')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ config('google.google_search_key') }}&libraries=places">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput-jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput-jquery.min.js'></script>
    <script>
        @if (!$order->partner_id)
            $('[name="partner_id"]').val('').trigger('change');
        @endif
        @if (!$order->driver_id)
            $('[name="driver_id"]').val('').trigger('change');
        @endif
        @if (!$order->partner_product_id)
            $('[name="partner_product_id"]').val('').trigger('change');
        @endif
        var wrapperForm = $(".wrapper-form"),
            selection = true,
            trip = {{ $order->trip }},
            phone_code = "{{ $order->phone_code }}",
            pickup = "{{ $order->pickup }}",
            plat = {{ $order->plat }},
            plng = {{ $order->plng }},
            drops = [],
            driverId = {{ $order->driver_id ?? 0 }},
            partnerProductId = {{ $order->partner_product_id ?? 0 }},
            objDrop = @json($order->drop);
        for (var obj in objDrop) {
            drops.push(objDrop[obj]);
        }

        renderPickup();
        if (trip != 3) {
            renderDrops();
        }

        $('[name="partner_id"]').on("change", function() {
            getDriversCars($(this).val());
            return false;
        });

        function getDriversCars(partnerId) {
            let formdata = new FormData();

            formdata.append("partner_id", partnerId);

            $.ajax({
                url: "{{ route('orders.drivers-cars') }}",
                type: 'POST',
                data: formdata,
                contentType: false,
                processData: false,
                success: function(res) {
                    $('[name="driver_id"]').html(
                        '<option value="">-- Choose a driver --</option>');
                    $('[name="partner_product_id"]').html(
                        '<option value="">-- Choose a car --</option>');
                    $.each(res.data.drivers, function(key, value) {
                        $('[name="driver_id"]').append('<option value="' + value
                            .id + '" ' + (driverId == value
                                .id ? 'selected' : '') + '>' + value.phone + ' ---  ' + value
                            .name +
                            '</option>');
                    });

                    $.each(res.data.cars, function(key, value) {
                        $('[name="partner_product_id"]').append('<option value="' + value
                            .id + '" ' + (partnerProductId == value
                                .id ? 'selected' : '') + '>' + value.vehicle_no + ' ---  ' + value
                            .name +
                            '</option>');
                    });
                },
            });
        }

        $('[name="phone"]').intlTelInput({
            initialCountry: "in",
            separateDialCode: true,
        }).on('countrychange', function(e, countryData) {
            phone_code = $(this).intlTelInput("getSelectedCountryData").dialCode;
        });
        $(".trip-types li").on("click", function() {
            $(".trip-types li").removeClass('active');
            $(this).addClass('active');
            if ($(this).data('trip') == "local") {
                $(".local .trip-option").each(function() {
                    if ($(this).find('input').is(":checked")) {
                        trip = $(this).find('input').val();
                    }
                });
            } else {
                $(".out-station .trip-option").each(function() {
                    if ($(this).find('input').is(":checked")) {
                        trip = $(this).find('input').val();
                    }
                });
            }
            fields(trip);
        });

        $(".local .trip-option").on("click", function() {
            $(".local .trip-option").removeClass('active');
            $(".local .trip-option").each(function() {
                $(this).find('input').prop("checked", false);
            });
            $(this).addClass('active');
            $(this).find('input').prop("checked", true);
            trip = $(this).find('input').val();
            fields(trip);
        });

        $(".out-station .trip-option").on("click", function() {
            $(".out-station .trip-option").removeClass('active');
            $(".out-station .trip-option").each(function() {
                $(this).find('input').prop("checked", false);
            });
            $(this).addClass('active');
            $(this).find('input').prop("checked", true);
            trip = $(this).find('input').val();
            fields(trip);
        });

        function fields(trip) {
            trip = typeof trip == "string" ? parseInt(trip) : trip;
            switch (trip) {
                case 1:
                    $(".city,.package,.end-date,.end-time,.local").hide();
                    $(".drop, #add-stop-address, .out-station").show();
                    break;
                case 2:
                    $(".city,.package,.local").hide();
                    $(".drop,.end-date,.end-time, #add-stop-address, .out-station").show();
                    break;
                case 3:
                    $(".drop,#add-stop-address,.end-date,.end-time, .out-station").hide();
                    $(".city,.package,.local").show();
                    break;
                case 4:
                    $(".city,.package,.end-date,.end-time, .out-station,#add-stop-address").hide();
                    $(".drop,.local").show();
                    break;

                default:
                    break;
            }
        }
        // Pre-defined
        $(".trip-types li").removeClass('active');
        $('[data-trip="' + ((trip == "3" || trip == "4") ? 'local' : 'out-station') + '"]').addClass('active');

        $('.' + ((trip == "3" || trip == "4") ? 'local' : 'out-station') + '  .trip-option').removeClass('active');
        $('.' + ((trip == "3" || trip == "4") ? 'local' : 'out-station') + ' .trip-option').each(function() {
            $(this).find('input').prop("checked", false);
        });

        $('.' + ((trip == "3" || trip == "4") ? 'local' : 'out-station') + ' .trip-option input[value="' + trip + '"]')
            .parent().parent().addClass('active');
        $('.' + ((trip == "3" || trip == "4") ? 'local' : 'out-station') + ' .trip-option input[value="' + trip + '"]')
            .prop("checked", true);

        fields(trip);
        // End pre-defined

        document.addEventListener("DOMContentLoaded", function(event) {
            var pickupPlace = new google.maps.places.Autocomplete(document.getElementById('pickup'));
            pickupPlace.setComponentRestrictions({
                country: ["in"],
            });
            var dropPlace = new google.maps.places.Autocomplete(document.getElementById('drop'));
            dropPlace.setComponentRestrictions({
                country: ["in"],
            });

            google.maps.event.addListener(pickupPlace, 'place_changed', function() {
                selection = true;
                let selector = document.getElementById("pickup");
                pickup = selector.value;
                selector.style.display = 'none';
                selector.value = "";

                selector = pickupPlace.getPlace();
                plat = selector.geometry.location.lat();
                plng = selector.geometry.location.lng();
                renderPickup();
            });

            google.maps.event.addListener(dropPlace, 'place_changed', function() {
                selection = true;
                let location = {};
                let selector = document.getElementById("drop");
                location.drop = selector.value;
                selector.style.display = 'none';

                selector = dropPlace.getPlace();
                location.dlat = selector.geometry.location.lat();
                location.dlng = selector.geometry.location.lng();

                drops.push(location);
                renderDrops();
            });
        });

        function renderPickup() {
            let selector = document.getElementById("render-pickup");
            selector.style.display = "block";

            selector.innerHTML =
                `<div class="alert select-address alert-warning alert-dismissible fade show border-1 py-1 my-2" role="alert">${pickup}<button type="button" class="btn-close p-2 pickup-deselect" data-bs-dismiss="alert" aria-label="Close"></button> </div>`;
        }

        function renderDrops() {
            drops.filter((location,
                index) => drops.indexOf(location) === index);
            if (trip != 3 && drops.length) {
                for (var i = 0; i < drops.length; i++) {
                    if (drops[i].drop == pickup) {
                        drops.splice(i, 1);
                    }
                }
            }
            if (drops.length == 0) {
                document.getElementById("render-drops").innerHTML = '';
                document.getElementById("drop").style.display = 'block';
                document.getElementById("drop").value = '';
                selection = false;
            } else {
                document.getElementById("render-drops").style.display = 'block';
                document.getElementById("render-drops").innerHTML = '';
                for (var i = 0; i < drops.length; i++) {
                    document.getElementById("render-drops").innerHTML +=
                        `<div class="alert select-address alert-warning alert-dismissible fade show border-1 py-1 ${i == 0?'my-2':''}" role="alert">${drops[i].drop}<button type="button" class="btn-close p-2 drop-deselect" data-index="${i}" data-bs-dismiss="alert" aria-label="Close"></button> </div>`;
                }
            }
        }

        wrapperForm.on("click", ".pickup-deselect", function() {
            $("#pickup").css('display', 'block');
            pickup = "";
        });

        wrapperForm.on("click", ".drop-deselect", function() {
            drops.splice($(this).data('index'), 1);
            renderDrops();
        });

        wrapperForm.on("click", "#add-stop-address", function() {
            document.getElementById("drop").style.display = 'block';
            document.getElementById("drop").value = '';
        });

        $("#pickup, #drop").on('keyup', function() {
            selection = false;
        });


        $("#ajax-form").validate({
            rules: {
                name: {
                    required: true,
                },
                phone: {
                    required: true,
                    digits: true,
                },
                email: {
                    required: true,
                    email: true,
                },
                pickup: {
                    required: true,
                },
                drop: {
                    required: true,
                },
                city: {
                    required: true,
                },
                package: {
                    required: true,
                },
                status: {
                    required: true,
                },
            },
            messages: {
                name: "*Please enter name",
                status: "*Please select status",
                pickup: "Please enter pickup address",
                drop: "Please enter drop address",
                city: "Please select a city",
                package: "Please select a package",
                phone: {
                    required: "Please enter your phone no.",
                    digits: "Only allow number",
                },
                email: {
                    required: "Please enter email id",
                    email: "Please enter valid email id",
                },
            },
            submitHandler: function(form) {

                // if (selection == false) {
                //     $(ajaxMessage).html(
                //         '<div class="alert alert-danger">Please enter stop address</div>');
                // }

                $(this).find('[type=submit]').attr('disabled', '');

                let formdata = new FormData(form);

                formdata.append("id", {{ $order->id }});
                formdata.append("phone_code", phone_code);
                formdata.append("pickup", pickup);
                formdata.append("plat", plat);
                formdata.append("plng", plng);

                if (trip != 3) {
                    if (!drops.length) {
                        $(ajaxMessage).html(
                            '<div class="alert alert-danger">Please enter stop address</div>');
                        return false;
                    }
                    formdata.append("drop", JSON.stringify(drops));
                }
                trip = typeof trip == "string" ? parseInt(trip) : trip;
                switch (trip) {
                    case 1:
                        formdata.append("type", "One Way Trip");
                        break;
                    case 2:
                        formdata.append("type", "Round Trip");
                        break;
                    case 3:
                        formdata.append("type", "Local / Rental Trip");
                        break;
                    case 4:
                        formdata.append("type", "Airport Transfer");
                        break;
                    default:
                        formdata.append("type", "One Way Trip");
                        break;
                }

                @stack('get-text-area')

                @stack('call-ajax')
                return false;
            }
        });
    </script>
@endpush