@extends('dashboard.layout.layout')
@section('body','ecommerce-application 2-columns')
{{-- @section('body_col','content-left-sidebar') --}}
@section('content')
<!-- account setting page start -->
<section id="page-account-settings">
    <div class="row">
        <!-- left menu section -->
        <div class="col-md-3 mb-2 mb-md-0">
            <div class="row">
                <div class="col-12">
                    <div class="card text-white bg-transparent text-center border-info">
                        <div class="card-content">
                            <div class="card-body">
                                <img src="{{ asset('dashboardAssets/global/images/cover/table.png') }}" alt="" class="mb-1" width="150">
                                <h3 class="card-title text-white">{{ $reservation->client->name ?? $reservation->client->phone }}</h3>
                                <p class="card-text">{!! trans('dashboard.reservation.reservation_number') !!} ({{ $reservation->id }})</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <ul class="nav nav-pills flex-column mt-md-0 mt-1">
                        <li class="nav-item mb-1">
                            <a class="nav-link d-flex py-75 active" id="reservation_general_data" data-toggle="pill" href="#account-vertical-general" aria-expanded="true">
                                <i class="feather icon-globe mr-50 font-medium-3"></i>
                                {!! trans('dashboard.reservation.navbar.general_data') !!}
                            </a>
                        </li>
                        <li class="nav-item mb-1">
                            <a class="nav-link d-flex py-75" id="reservation_cart" data-toggle="pill" href="#account-vertical-password" aria-expanded="false">
                                <i class="feather icon-shopping-cart mr-50 font-medium-3"></i>
                                {!! trans('dashboard.reservation.navbar.reservation_products') !!}
                            </a>
                        </li>
                        <li class="nav-item mb-1">
                            <a class="nav-link d-flex py-75" id="reservation_coupon" data-toggle="pill" href="#account-vertical-coupon" aria-expanded="false">
                                <i class="feather icon-percent mr-50 font-medium-3"></i>
                                {!! trans('dashboard.reservation.navbar.coupon') !!}
                            </a>
                        </li>
                        <li class="nav-item mb-1">
                            <a class="nav-link d-flex py-75" id="reservation_bill" data-toggle="pill" href="#account-vertical-info" aria-expanded="false">
                                <i class="feather icon-file-text mr-50 font-medium-3"></i>
                                {!! trans('dashboard.reservation.navbar.bill') !!}
                            </a>
                        </li>
                        <li class="nav-item mb-1">
                            <a class="nav-link d-flex py-75" id="reservation_status" data-toggle="pill" href="#account-vertical-social" aria-expanded="false">
                                <i class="feather icon-clock mr-50 font-medium-3"></i>
                                {!! trans('dashboard.reservation.navbar.status') !!}
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- right content section -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="account-vertical-general" aria-labelledby="reservation_general_data" aria-expanded="true">
                                <div class="media">
                                    <a href="javascript: void(0);">
                                        <img src="{{ $reservation->client->avatar }}" class="rounded mr-75" alt="{{ $reservation->client->fullname }}" height="64" width="64">
                                    </a>
                                    <div class="media-body mt-30">
                                        <div class="col-12 px-0">
                                            <p class="text-muted ml-75">{!! trans('dashboard.client.client') !!} : {{ $reservation->client->name }}</p>
                                            <p class="text-muted ml-75">{!! trans('dashboard.general.phone') !!} : {{ $reservation->client->phone }}</p>
                                        </div>
                                        <p class="text-muted ml-75 mt-50"><small>{!! trans('dashboard.reservation.reservation_count') !!} : {{ $reservation->client->reservations->count() }}</small></p>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="username">{!! trans('dashboard.reservation.username') !!}</label>
                                                <input type="text" class="form-control" id="username" value="{{ @$reservation->username }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="phones">{!! trans('dashboard.reservation.phones') !!}</label>
                                                <input type="text" class="form-control" id="phones" value="{{ $reservation->phones ? implode(' - ',$reservation->phones) : null }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="branch">{!! trans('dashboard.branch.branch') !!}</label>
                                                <input type="text" class="form-control" id="branch" value="{{ @$reservation->branch->name }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="account-username">{!! trans('dashboard.reservation.reservation_number') !!}</label>
                                                <input type="text" class="form-control" id="account-username" value="{{ $reservation->id }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="account-name">{!! trans('dashboard.reservation.reservation_date') !!}</label>
                                                <input type="text" class="form-control" id="account-name" value="{{ $reservation->reservation_at->format("Y-m-d") }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="account-e-mail">{!! trans('dashboard.reservation.reservation_time') !!}</label>
                                                <input type="text" class="form-control" id="account-e-mail" value="{{ $reservation->reservation_at->format("h:i A") }}" required data-readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="account-company">{{ trans('dashboard.coffe_table.table_number') }}</label>
                                            <input type="text" class="form-control" id="account-company" value="{{ optional($reservation->coffeTable)->table_number }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="number_of_persons">{{ trans('dashboard.coffe_table.number_of_persons') }}</label>
                                            <input type="text" class="form-control" id="number_of_persons" value="{{ $reservation->number_of_persons }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="reservation_type">{{ trans('dashboard.reservation.reservation_type') }}</label>
                                            <input type="text" class="form-control" id="reservation_type" value="{{ trans('dashboard.reservation.types.'.$reservation->creating_type) }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="reservation_created_date">{{ trans('dashboard.reservation.reservation_created_date') }}</label>
                                            <input type="text" class="form-control" id="reservation_created_date" value="{{ $reservation->created_at->format("Y-m-d (h:i A)") }}" readonly>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="tab-pane fade " id="account-vertical-password" role="tabpanel" aria-labelledby="reservation_cart" aria-expanded="false">

                                <section id="place-order" class="list-view product-checkout" style="grid-template-columns: none;">
                                    <div class="checkout-items">
                                        @forelse ($reservation->reservationProducts as $cart)
                                        <div class="card ecommerce-card border-info">
                                            <div class="card-content">
                                                <div class="item-img text-center">
                                                    <a href="{!! route('dashboard.product.show',$cart->product_data->id) !!}">
                                                        <img src="{{ $cart->product_data->image }}" alt="img-placeholder" style="width:100%;height: 235px;">
                                                    </a>
                                                </div>
                                                <div class="card-body">
                                                    <div class="item-name">
                                                        {{ $cart->product_data->name }}
                                                        <span class="font-small-2 mr-1"> ({{ str_limit($cart->product_data->desc,50) }})</span>
                                                        <p class="item-company">{!! trans('dashboard.product.'.$cart->measuring_unit) !!} <span class="company-name"> ({{ $cart->weight ?? $cart->size }})</span></p>
                                                        {{-- <p class="stock-status-in">In Stock</p> --}}
                                                    </div>
                                                    <div class="item-quantity">
                                                        <p class="quantity-title">{!! trans('dashboard.order.qty') !!}</p>
                                                        <div class="input-group input-group-md disabled-touchspin" style="width: 50%;">
                                                            {!! Form::text('', $cart->qty, ['class' => "touchspin", 'data-bts-init-val' => null , 'data-bts-max' => 999999999 , 'readonly','disabled']) !!}
                                                        </div>
                                                    </div>
                                                    <div class="item-quantity">
                                                        <p class="quantity-title">{!! trans('dashboard.order.total_price') !!}</p>

                                                        <div class="input-group input-group-md disabled-touchspin" style="width: 50%;">
                                                            {!! Form::text('', $cart->qty * (@$cart->product_data->offer_price ?? @$cart->product_data->price), ['class' => "touchspin", 'data-bts-init-val' => null , 'data-bts-max' =>
                                                                    999999999 , 'readonly' ,'disabled' ]) !!}
                                                        </div>
                                                    </div>
                                                    @if (@$cart->product_data->offer_price)
                                                        <p class="offers">{!! trans('dashboard.product_offer.offer_discount') !!} : {{ 100 - ((@$cart->product_data->offer_price * 100) / @$cart->product_data->price) }} % </p>
                                                        @endif
                                                </div>
                                                <div class="item-options text-center">
                                                    <div class="item-wrapper">
                                                        <div class="item-rating">
                                                            <div class="badge badge-primary badge-md">
                                                                {{ number_format(@$cart->product_data->product_rate ?? 0 , 2) }} <i class="feather icon-star ml-25"></i>
                                                            </div>
                                                        </div>
                                                        <div class="item-cost">
                                                            <h6 class="item-price">
                                                                {{ @$cart->product_data->offer_price ?? @$cart->product_data->price }}
                                                            </h6>
                                                            @if (@$cart->product_data->offer_price)
                                                                <p class="shipping">
                                                                    <i class="feather icon-gift"></i> <del>{{ @$cart->product_data->price }}</del>
                                                                </p>

                                                                @endif
                                                        </div>
                                                    </div>
                                                    <div class="wishlist remove-wishlist">
                                                        <a href="{!! route('dashboard.product.show',$cart->product_id) !!}" class="text-primary text-bold-600">
                                                            <i class="feather icon-tv align-middle"></i> {!! trans('dashboard.general.show') !!}
                                                        </a>
                                                    </div>
                                                    <div class="cart remove-wishlist">
                                                        <a href="{!! route('dashboard.product.edit',$cart->product_id) !!}" class="text-white text-bold-600">
                                                            <i class="fa fa-edit mr-25"></i> {!! trans('dashboard.general.edit') !!}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @empty
                                        <div class="card ecommerce-card">
                                            <div class="card-content d-flex justify-content-center">
                                                <div class="col-md-12">
                                                    <div class="alert alert-info alert-styled-left alert-dismissible text-center">
                                                        {{ trans('dashboard.reservation.cart_is_empty') }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforelse
                                    </div>

                                </section>




                            </div>
                            <div class="tab-pane fade" id="account-vertical-info" role="tabpanel" aria-labelledby="reservation_bill" aria-expanded="false">
                                <div class="card border-info bg-transparent">
                                    <div class="card-header pb-1 border-info bg-transparent header-elements-inline">
                                        <h6 class="card-title mb-1">{!! trans('dashboard.order.invoice') !!}</h6>
                                        <div class="header-elements mb-1">

                                            <button type="button" onclick="printDiv('print_invoice')" class="btn btn-primary mb-1 mb-md-0 ml-3"><i class="feather icon-printer mr-2"></i> {!! trans('dashboard.general.print') !!}</button>
                                        </div>
                                    </div>
                                    <div class="card-content d-flex">
                                        <div class="card-body">
                                            <div id="print_invoice">
                                                <div class="row">
                                                    <div class="col-sm-6 col-12">
                                                        <div class="invoice-details mt-2">
                                                            <h6>{!! trans('dashboard.reservation.invoice_num',['number' => $reservation->id]) !!}.</h6>
                                                            <h6 class="mt-2">
                                                                {!! trans('dashboard.reservation.reservation_type') !!} :
                                                                <small>
                                                                    {{ trans('dashboard.reservation.types.'.$reservation->creating_type) }}
                                                                </small>
                                                            </h6>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6 col-12">
                                                        <div class="invoice-details mt-2">
                                                            <h6 class="mt-2">
                                                                {!! trans('dashboard.reservation.reservation_date') !!} : <small>{{ $reservation->reservation_at->isoFormat("D MMMM , Y ( h:mm a )") }}</small>
                                                            </h6>
                                                            <h6 class="mt-2">
                                                                {!! trans('dashboard.reservation.reservation_created_date') !!} : <small>{{ $reservation->created_at->isoFormat("D MMMM , Y ( h:mm a )") }}</small>
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Invoice Recipient Details -->
                                                <div id="invoice-customer-details" class="row pt-2">
                                                    <div class="col-sm-6 col-12 text-left">

                                                        <h5>{!! trans('dashboard.client.client') !!} : <small>{{ $reservation->username ?? $reservation->phone }}</small></h5>
                                                        <div class="recipient-contact pb-2">
                                                            <p>
                                                                <i class="feather icon-mail"></i>
                                                                {{ optional($reservation->client)->fullname }}
                                                            </p>
                                                            <p>
                                                                <i class="feather icon-phone"></i>
                                                                {{ optional($reservation->client)->phone }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6 col-12 text-left">
                                                        <div class="company-info my-2">
                                                            <small>
                                                                {!! trans('dashboard.branch.branch') !!} : {{ @$reservation->branch->name }}
                                                            </small>
                                                        </div>

                                                        <div class="company-contact">
                                                            <p>
                                                                <i class="feather icon-mail"></i>
                                                                {{ optional(@$reservation->branch->city)->name }}
                                                            </p>
                                                            <p>
                                                                <i class="feather icon-phone"></i>
                                                                {{ optional(@$reservation->branch->country)->name }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <hr>
                                                <div class="pt-1 invoice-items-table">
                                                    <div class="row">
                                                        <div class="table-responsive col-12">
                                                            <table class="table table-borderless">
                                                                <thead>
                                                                    <tr>
                                                                        <th>{!! trans('dashboard.product.product') !!}</th>
                                                                        <th>{!! trans('dashboard.product.price') !!}</th>
                                                                        <th>{!! trans('dashboard.product.offer_price') !!}</th>
                                                                        <th>{!! trans('dashboard.product.weight_or_size') !!}</th>
                                                                        <th>{!! trans('dashboard.order.qty') !!}</th>
                                                                        <th>{!! trans('dashboard.order.total') !!}</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($reservation->reservationProducts as $item)
                                                                    <tr>
                                                                        <td>
                                                                            <h6 class="mb-0">{{ optional($item->product_data)->name }}</h6>

                                                                        </td>
                                                                        <td>{{ optional($item->product_data)->price }}</td>
                                                                        <td>{{ optional($item->product_data)->offer_price }}</td>

                                                                        <td>
                                                                            @if ($item->measuring_unit == 'weight' || $item->weight)
                                                                            <div class="badge badge-md font-small-3 text-bold-300 badge-success mr-1 mb-1">
                                                                                {{ $item->weight }}
                                                                            </div>
                                                                            @elseif ($item->measuring_unit == 'size' || $item->size)
                                                                            <div class="badge badge-md font-small-3 text-bold-300 badge-success mr-1 mb-1">
                                                                                {{ $item->size }}
                                                                            </div>
                                                                            @endif
                                                                        </td>
                                                                        <td>{{ $item->qty }}</td>
                                                                        <td><span class="font-weight-semibold">{{ $item->qty * (@$item->product_data->offer_price ?? @$item->product_data->price)   }}</span></td>
                                                                    </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr>
                                                <hr>
                                                <div class="pt-1 invoice-items-table">
                                                    <div class="row">
                                                        <div class="table-responsive col-12">
                                                            <table class="table table-borderless">
                                                                <thead>
                                                                    <tr>
                                                                        <th>{!! trans('dashboard.addition.addition') !!}</th>
                                                                        <th>{!! trans('dashboard.addition.price') !!}</th>
                                                                        <th>{!! trans('dashboard.order.qty') !!}</th>
                                                                        <th>{!! trans('dashboard.order.total') !!}</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($reservation->additions_relation as $addition)
                                                                    <tr>
                                                                        <td>
                                                                            <h6 class="mb-0">{{ $addition->name }}</h6>
                                                                        </td>
                                                                        <td>{{ $addition->price }}</td>
                                                                        <td>{{ $addition->qty }}</td>
                                                                        <td><span class="font-weight-semibold">{{ $addition->qty * (@$addition->price)   }}</span></td>
                                                                    </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr>


                                                <div id="invoice-total-details" class="invoice-total-table">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <span class="text-muted">{!! trans('dashboard.setting.app_data') !!}:</span>
                                                            <div class="d-flex flex-wrap wmin-md-400">
                                                                <ul class="list list-unstyled mb-0">
                                                                    <li>
                                                                        <h5 class="my-2">
                                                                            {!! trans('dashboard.setting.project_name') !!} :
                                                                        </h5>
                                                                    </li>
                                                                    <li>{!! trans('dashboard.general.email') !!}:</li>
                                                                    <li>{!! trans('dashboard.social.facebook') !!}:</li>
                                                                    <li>{!! trans('dashboard.social.twitter') !!}:</li>
                                                                    <li>{!! trans('dashboard.social.instagram') !!}:</li>
                                                                    <li>{!! trans('dashboard.setting.phone_numbers') !!}:</li>
                                                                </ul>

                                                                <ul class="list list-unstyled text-right mb-0 ml-auto">
                                                                    <li>
                                                                        <h5 class="font-weight-semibold my-2">{{ setting('project_name') }}</h5>
                                                                    </li>
                                                                    <li>{{ setting('email') }}</li>
                                                                    <li>{{ setting('facebook') }}</li>
                                                                    <li>{{ setting('twitter') }}</li>
                                                                    <li>{{ setting('instagram') }}</li>
                                                                    <li>{{ optional(setting('phones')) ? setting('phones') : setting('phone') }}</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <h6 class="mb-3">{!! trans('dashboard.order.invoice_detail') !!}</h6>
                                                            <div class="table-responsive">
                                                                <table class="table">
                                                                    <tbody>

                                                                        @if ($reservation->coupon_data)
                                                                        <tr>
                                                                            <th>{!! trans('dashboard.coupon.discount_percentage') !!} <span>({!! trans('dashboard.coupon.coupon') !!} {{ $reservation->coupon_data->discount_percentage }} %)</span> :
                                                                            </th>
                                                                            <td class="text-right">{{ $reservation->coupon_price }} </td>
                                                                        </tr>
                                                                        @endif
                                                                        <tr>
                                                                            <th>{!! trans('dashboard.reservation.service_price') !!} : </th>
                                                                            <td class="text-right">{{ $reservation->service_price }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>{!! trans('dashboard.product.offer_price') !!}: </th>
                                                                            <td class="text-right">{{ $reservation->offer_price }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>{!! trans('dashboard.order.subtotal') !!}:</th>

                                                                            <td class="text-right">{{ number_format($reservation->subtotal,2) }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <th>{!! trans('dashboard.order.total_price') !!}:</th>
                                                                            <td class="text-right text-primary">
                                                                                <h5 class="font-weight-semibold">{{ number_format($reservation->total_price,2) }}</h5>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                                <hr>
                                                <div id="invoice-footer" class="pt-3">
                                                    <p class="text-muted">{{ setting("project_name") }} &copy; {{ date("Y") }}</p>
                                                </div>
                                                <!--/ Invoice Recipient Details -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade " id="account-vertical-social" role="tabpanel" aria-labelledby="reservation_status" aria-expanded="false">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="card border-info bg-transparent" id="reservation_statuses_{{ $reservation->id }}">
                                            <div class="card-header pb-1">
                                                <h4 class="card-title"> {{ trans('dashboard.reservation.reservation_status') }}</h4>
                                            </div>
                                            <div class="card-content">
                                                <div class="card-body">
                                                    <ul class="activity-timeline timeline-left list-unstyled">
                                                        <li class="" id="pending">
                                                            <div class="timeline-icon {!! optional($reservation->reservation_status_times)->pending || empty($reservation->reservation_status_times) ? 'bg-success' : 'bg-danger' !!}">
                                                                <i
                                                                    class="feather {!! optional($reservation->reservation_status_times)->pending || empty($reservation->reservation_status_times) ? 'icon-check' : 'icon-help-circle' !!} font-medium-2"></i>
                                                            </div>
                                                            <div class="timeline-info">
                                                                <p class="font-weight-bold {!! optional($reservation->reservation_status_times)->pending || empty($reservation->reservation_status_times) ? 'text-success' : 'text-danger' !!}">
                                                                    {{ trans('dashboard.reservation.statuses.pending') }}</p>
                                                            </div>
                                                            <small class="time">{{ $reservation->created_at->format("Y-m-d H:i") }}</small>
                                                        </li>

                                                        <li class="" id="in_kitchen">
                                                            <div class="timeline-icon {!! optional($reservation->reservation_status_times)->in_kitchen ? 'bg-success' : 'bg-danger' !!}">
                                                                <i class="feather {!! optional($reservation->reservation_status_times)->in_kitchen ? 'icon-check' : 'icon-help-circle' !!} font-medium-2"></i>
                                                            </div>
                                                            <div class="timeline-info">
                                                                <p class="font-weight-bold {!! optional($reservation->reservation_status_times)->in_kitchen ? 'text-success' : 'text-danger' !!}">{{ trans('dashboard.reservation.statuses.in_kitchen') }}
                                                                </p>

                                                            </div>
                                                            <small class="time">{!! optional($reservation->reservation_status_times)->in_kitchen ?? "<i class='feather icon-clock font-medium-1'></i>" !!}</small>
                                                        </li>
                                                        <li class="" id="on_table">
                                                            <div class="timeline-icon {!! optional($reservation->reservation_status_times)->on_table ? 'bg-success' : 'bg-danger' !!}">
                                                                <i class="feather {!! optional($reservation->reservation_status_times)->on_table ? 'icon-check' : 'icon-help-circle' !!} font-medium-2"></i>
                                                            </div>
                                                            <div class="timeline-info">
                                                                <p class="font-weight-bold {!! optional($reservation->reservation_status_times)->on_table ? 'text-success' : 'text-danger' !!}">{{ trans('dashboard.reservation.statuses.on_table') }}</p>

                                                            </div>
                                                            <small class="time">{!! optional($reservation->reservation_status_times)->on_table ?? "<i class='feather icon-clock font-medium-1'></i>" !!}</small>
                                                        </li>
                                                        <li class="" id="client_cancel">
                                                            <div class="timeline-icon {!! optional($reservation->reservation_status_times)->client_cancel ? 'bg-success' : 'bg-danger' !!}">
                                                                <i class="feather {!! optional($reservation->reservation_status_times)->client_cancel ? 'icon-check' : 'icon-help-circle' !!} font-medium-2"></i>
                                                            </div>
                                                            <div class="timeline-info">
                                                                <p class="font-weight-bold {!! optional($reservation->reservation_status_times)->client_cancel ? 'text-success' : 'text-danger' !!}">
                                                                    {{ trans('dashboard.reservation.statuses.client_cancel') }}</p>

                                                            </div>
                                                            <small class="time">{!! optional($reservation->reservation_status_times)->client_cancel ?? "<i class='feather icon-clock font-medium-1'></i>" !!}</small>
                                                        </li>
                                                        <li class="" id="admin_cancel">
                                                            <div class="timeline-icon {!! optional($reservation->reservation_status_times)->admin_cancel ? 'bg-success' : 'bg-danger' !!}">
                                                                <i class="feather {!! optional($reservation->reservation_status_times)->admin_cancel ? 'icon-check' : 'icon-help-circle' !!} font-medium-2"></i>
                                                            </div>
                                                            <div class="timeline-info">
                                                                <p class="font-weight-bold {!! optional($reservation->reservation_status_times)->admin_cancel ? 'text-success' : 'text-danger' !!}">
                                                                    {{ trans('dashboard.reservation.statuses.admin_cancel') }}</p>

                                                            </div>
                                                            <small class="time">{!! optional($reservation->reservation_status_times)->admin_cancel ?? "<i class='feather icon-clock font-medium-1'></i>" !!}</small>
                                                        </li>
                                                        <li class="" id="completed">
                                                            <div class="timeline-icon {!! optional($reservation->reservation_status_times)->completed ? 'bg-success' : 'bg-danger' !!}">
                                                                <i class="feather {!! optional($reservation->reservation_status_times)->completed ? 'icon-check' : 'icon-help-circle' !!} font-medium-2"></i>
                                                            </div>
                                                            <div class="timeline-info">
                                                                <p class="font-weight-bold {!! optional($reservation->reservation_status_times)->completed ? 'text-success' : 'text-danger' !!}">{{ trans('dashboard.reservation.statuses.completed') }}
                                                                </p>

                                                            </div>
                                                            <small class="time">{!! optional($reservation->reservation_status_times)->completed ?? "<i class='feather icon-clock font-medium-1'></i>" !!}</small>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="card border-info bg-transparent" id="reservation_statuses_{{ $reservation->id }}">
                                            <div class="card-header pb-1">
                                                <h4 class="card-title"> {{ trans('dashboard.reservation.reservation_status') }}</h4>
                                            </div>
                                            <div class="card-content">
                                                <div class="card-body">
                                                    <ul class="list-unstyled mb-0">
                                                        <li class="d-block mr-2">
                                                            <fieldset>
                                                                <div class="vs-radio-con vs-radio-success">
                                                                    <input type="radio" name="reservation_status" onchange="changeReservationStatus(this.value)" {!! $reservation->reservation_status == 'pending' ? 'checked' : null !!} value="pending">
                                                                    <span class="vs-radio">
                                                                        <span class="vs-radio--border"></span>
                                                                        <span class="vs-radio--circle"></span>
                                                                    </span>
                                                                    <span class="">{{ trans('dashboard.reservation.statuses.pending') }}</span>
                                                                </div>
                                                            </fieldset>
                                                        </li>
                                                        <li class="d-block mr-2 mt-3">
                                                            <fieldset>
                                                                <div class="vs-radio-con vs-radio-success">
                                                                    <input type="radio" name="reservation_status" onchange="changeReservationStatus(this.value)" {!! $reservation->reservation_status == 'in_kitchen' ? 'checked' : null !!} value="in_kitchen">
                                                                    <span class="vs-radio">
                                                                        <span class="vs-radio--border"></span>
                                                                        <span class="vs-radio--circle"></span>
                                                                    </span>
                                                                    <span class="">{{ trans('dashboard.reservation.statuses.in_kitchen') }}</span>
                                                                </div>
                                                            </fieldset>
                                                        </li>
                                                        <li class="d-block mr-2 mt-3">
                                                            <fieldset>
                                                                <div class="vs-radio-con vs-radio-success">
                                                                    <input type="radio" name="reservation_status" onchange="changeReservationStatus(this.value)" {!! $reservation->reservation_status == 'on_table' ? 'checked' : null !!} value="on_table">
                                                                    <span class="vs-radio">
                                                                        <span class="vs-radio--border"></span>
                                                                        <span class="vs-radio--circle"></span>
                                                                    </span>
                                                                    <span class="">{{ trans('dashboard.reservation.statuses.on_table') }}</span>
                                                                </div>
                                                            </fieldset>
                                                        </li>
                                                        <li class="d-block mr-2 mt-3">
                                                            <fieldset>
                                                                <div class="vs-radio-con vs-radio-success">
                                                                    <input type="radio" name="reservation_status" onchange="changeReservationStatus(this.value)" {!! $reservation->reservation_status == 'admin_cancel' ? 'checked' : null !!} value="admin_cancel">
                                                                    <span class="vs-radio">
                                                                        <span class="vs-radio--border"></span>
                                                                        <span class="vs-radio--circle"></span>
                                                                    </span>
                                                                    <span class="">{{ trans('dashboard.reservation.statuses.admin_cancel') }}</span>
                                                                </div>
                                                            </fieldset>
                                                        </li>
                                                        <li class="d-block mr-2 mt-3">
                                                            <fieldset>
                                                                <div class="vs-radio-con vs-radio-success">
                                                                    <input type="radio" name="reservation_status" onchange="changeReservationStatus(this.value)" {!! $reservation->reservation_status == 'client_cancel' ? 'checked' : null !!} value="client_cancel">
                                                                    <span class="vs-radio">
                                                                        <span class="vs-radio--border"></span>
                                                                        <span class="vs-radio--circle"></span>
                                                                    </span>
                                                                    <span class="">{{ trans('dashboard.reservation.statuses.client_cancel') }}</span>
                                                                </div>
                                                            </fieldset>
                                                        </li>
                                                        <li class="d-block mr-2 mt-3">
                                                            <fieldset>
                                                                <div class="vs-radio-con vs-radio-success">
                                                                    <input type="radio" name="reservation_status" onchange="changeReservationStatus(this.value)" {!! $reservation->reservation_status == 'completed' ? 'checked' : null !!} value="completed">
                                                                    <span class="vs-radio">
                                                                        <span class="vs-radio--border"></span>
                                                                        <span class="vs-radio--circle"></span>
                                                                    </span>
                                                                    <span class="">{{ trans('dashboard.reservation.statuses.completed') }}</span>
                                                                </div>
                                                            </fieldset>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade " id="account-vertical-coupon" role="tabpanel" aria-labelledby="reservation_coupon" aria-expanded="false">
                                @if ($coupon)
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover-animation">
                                        <thead>
                                            <tr class="text-center">
                                                <th>#</th>
                                                <th>{{ trans('dashboard.general.image') }}</th>
                                                <th>{{ trans('dashboard.coupon.code') }}</th>
                                                <th>{{ trans('dashboard.coupon.discount_percentage') }}</th>
                                                <th>{{ trans('dashboard.reservation.price_before_coupon') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="{{ $coupon->id }} text-center">
                                                <td>{{ $loop->iteration }}</td>
                                                <td class="product-img sorting_1">
                                                    <a href="{{ $coupon->image }}" data-fancybox="gallery">
                                                        <img src="{{ $coupon->image }}" style="width:60px; height:60px;" class="img-preview img-thumbnail">
                                                    </a>
                                                </td>
                                                <td>{{ $coupon->code }}</td>
                                                <td>{{ $coupon->discount_percentage }} %</td>
                                                <td>{{ $reservation->price_before_coupon }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                @else
                                <div class="card-content d-flex justify-content-center">
                                    <div class="col-md-12">
                                        <div class="alert alert-info alert-styled-left alert-dismissible text-center">
                                            {{ trans('dashboard.reservation.no_coupon_used') }}
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- account setting page end -->

@endsection
@section('vendor_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/vendors/css/forms/spinner/jquery.bootstrap-touchspin.css">

@endsection


@section('page_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/plugins/forms/wizard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/invoice.css">
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/app-ecommerce-shop.css">
@endsection

@section('vendor_scripts')
<script src="{{ asset('dashboardAssets') }}/vendors/js/forms/spinner/jquery.bootstrap-touchspin.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/forms/spinner/jquery.bootstrap-touchspin.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/extensions/jquery.steps.min.js"></script>
@endsection
@section('page_scripts')
<script src="{{ asset('dashboardAssets') }}/js/scripts/forms/number-input.min.js"></script>
{{-- <script src="{{ asset('dashboardAssets') }}/js/scripts/pages/dashboard-ecommerce.js"></script> --}}
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{{-- <script src="{{ asset('dashboardAssets') }}/js/scripts/pages/account-setting.js"></script> --}}
<script src="{{ asset('dashboardAssets') }}/js/scripts/pages/app-ecommerce-shop.js"></script>

<script>
    function changeReservationStatus(reservation_status) {
        $.ajax({
            url: '{{ LaravelLocalization::localizeUrl("dashboard/ajax/update_reservation_status/{$reservation->id}") }}',
            method: "POST",
            dataType: "json",
            data: {reservation_status : reservation_status,_token : "{{ csrf_token() }}"},
            success: function(data) {
                if (data['value'] == 1) {
                    toastr.success(data['message'], '', { "progressBar": true });
                }else{
                    toastr.danger(data['message'], '', { "progressBar": true });
                }
            }
        });
    }
</script>
@endsection