@extends('dashboard.layout.content')

@section('customTitle')
    {{ __('general.show_reservations') }}
@endsection

@section('customStyle')
    <link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
    <link href='{{ asset("dashboard/$locale/assets/css/elements/miscellaneous.css") }}' rel="stylesheet" type="text/css" />
    <link href='{{ asset("dashboard/$locale/assets/css/components/tabs-accordian/custom-tabs.css") }}' rel="stylesheet"
        type="text/css" />
    <link href='{{ asset("dashboard/$locale/assets/css/widgets/modules-widgets.css") }}' rel="stylesheet" type="text/css" />

    <style>
        .actions-btn button {
            width: 180px;
        }
    </style>

    <style>
        .actions-btn a {
            width: 180px;
        }
    </style>
@endsection

@section('customBody')
    <div id="content" class="main-content">
        <div class="layout-px-spacing">
            <div class="row layout-top-spacing">
                <div class="col-12 layout-spacing ">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="col-12 row">
                                <h4 class="col-12"><i class="las la-bolt"></i> {{ __('general.quick_actions') }}</h4>
                                <div class="actions-btn">
                                    <button class="btn btn-primary" data-toggle="modal" data-target="#notesModal">
                                        <i class="fas fa-sticky-note"></i> @lang('validation.attributes.notes')
                                    </button>
                                </div>

                                <div class="actions-btn">
                                    <button class="btn btn-danger" data-toggle="modal" data-target="#cancelModal">
                                        <i class="fas fa-sticky-note"></i> @lang('general.cancel')
                                    </button>
                                </div>

                                <div class="actions-btn">
                                    <button class="btn btn-secondary" data-toggle="modal" data-target="#finishModal">
                                        <i class="fas fa-sticky-note"></i> @lang('general.finish')
                                    </button>
                                </div>

                                @include('dashboard.reservation.components.contact_status_btn', [
                                    'reservation' => $reservation,
                                ])

                                @include('dashboard.reservation.components.car_receiving_status_btn', [
                                    'reservation' => $reservation,
                                ])

                                @include('dashboard.reservation.components.refund_status_btn', [
                                    'reservation' => $reservation,
                                ])

                                <div class="actions-btn">
                                    <a class="btn @if ($reservation->is_under_following == true) btn-warning @else btn-outline-warning @endif"
                                        href="{{ route('dashboard.reservation.under_following_status', ['reservation' => $reservation]) }}">
                                        <i class="fa fa-retweet"></i> @lang('validation.attributes.is_under_following')
                                    </a>
                                </div>

                            </div>

                            <div class="widget-content widget-content-area rounded-pills-icon">
                                <ul class="nav nav-pills mb-4 mt-3 justify-content-center" id="rounded-pills-icon-tab"
                                    role="tablist">
                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center {{ current_tab('#data-information') }}"
                                            id="data-information-tab" data-toggle="pill" href="#data-information"
                                            role="tab" aria-controls="data-information" aria-selected="false">
                                            <div class="mb-2">
                                                <img width="40" height="40"
                                                    src="https://img.icons8.com/ios/100/information--v1.png"
                                                    alt="information--v1" />
                                            </div>
                                            {{ __('general.data_information') }}
                                        </a>
                                    </li>

                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center {{ current_tab('#branch-information') }}"
                                            id="branch-information-tab" data-toggle="pill" href="#branch-information"
                                            role="tab" aria-controls="branch-information" aria-selected="false">
                                            <div class="mb-2">
                                                <img width="40" height="40"
                                                    src="https://img.icons8.com/ios/100/merge-git.png"
                                                    alt="information--v1" />
                                            </div>
                                            {{ __('general.branch_information') }}
                                        </a>
                                    </li>

                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center {{ current_tab('#customer-information') }}"
                                            id="customer-information-tab" data-toggle="pill" href="#customer-information"
                                            role="tab" aria-controls="customer-information" aria-selected="false">
                                            <div class="mb-2">
                                                <img width="40" height="40"
                                                    src="https://img.icons8.com/ios/100/gender-neutral-user--v1.png"
                                                    alt="information--v1" />
                                            </div>
                                            {{ __('general.customer_information') }}
                                        </a>
                                    </li>

                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center {{ current_tab('#extensions-information') }}"
                                            id="extensions-information-tab" data-toggle="pill" href="#extensions-information"
                                            role="tab" aria-controls="extensions-information" aria-selected="false">
                                            <div class="mb-2">
                                                <img width="40" height="40"
                                                    src="https://img.icons8.com/ios/50/puzzle.png"
                                                    alt="information--v1" />
                                            </div>
                                            {{ __('general.extensions_information') }}
                                        </a>
                                    </li>

                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center {{ current_tab('#finance-information') }}"
                                            id="finance-information-tab" data-toggle="pill" href="#finance-information"
                                            role="tab" aria-controls="finance-information" aria-selected="false">
                                            <div class="mb-2">
                                                <img width="40" height="40"
                                                    src="https://img.icons8.com/ios/100/money-bag-euro.png"
                                                    alt="information--v1" />
                                            </div>
                                            {{ __('general.finance_information') }}
                                        </a>
                                    </li>

                                    <li class="nav-item ml-2 mr-2">
                                        <a class="nav-link mb-2 text-center {{ current_tab('#logs-information') }}"
                                            id="logs-information-tab" data-toggle="pill" href="#logs-information"
                                            role="tab" aria-controls="logs-information" aria-selected="false">
                                            <div class="mb-2">
                                                <img width="40" height="40"
                                                    src="https://img.icons8.com/wired/64/edit-property.png"
                                                    alt="information--v1" />
                                            </div>
                                            {{ __('general.logs') }}
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content" id="rounded-pills-icon-tabContent">
                                    <div class="tab-pane fade {{ current_tab('#data-information') }}"
                                        id="data-information" role="tabpanel" aria-labelledby="data-information-tab">
                                        <div class="layout-px-spacing">

                                            <div class="row justify-content-space layout-top-spacing">
                                                <div class="col-md-12 mb-4">
                                                    <h6>{{ __('dashboard.Reservation Data') }} :</h6>
                                                </div>
                                                <x-cards.information :placeholder="__('validation.attributes.reservation_code')" :value="$reservation?->code ?? '-----'"
                                                    colorName="secondary" />

                                                <x-cards.information :placeholder="__('validation.attributes.car')" :value="$reservation?->car?->models?->name .
                                                    ' | ' .
                                                    $reservation?->car?->model"
                                                    colorName="info" />

                                                <x-cards.information :placeholder="__('validation.attributes.category')" :value="$reservation?->category?->name ?? '-----'"
                                                    colorName="success" />

                                                <x-cards.information :placeholder="__('dashboard.Reservation Start')" :value="$reservation->start_date . ' (' . $reservation->start_time . ')'"
                                                    colorName="secondary" />

                                                <x-cards.information :placeholder="__('dashboard.Reservation End')" :value="$lastExtension?->end_date . ' (' . $lastExtension?->end_time . ')'"
                                                    colorName="info" />

                                                <x-cards.information :placeholder="__('validation.attributes.return_date')" :value="$reservation->return_date ?? '-----' "
                                                    colorName="success" />

                                                <x-cards.information :placeholder="__('validation.attributes.status')" :value="view(
                                                    'dashboard.reservation.components.status',
                                                    compact('reservation'),
                                                )" colorName="secondary" />

                                                <x-cards.information :placeholder="__('dashboard.insurance_type')" :value="__('dashboard.' . $reservation?->insurance_type)"
                                                    colorName="info" />

                                                <x-cards.information :placeholder="__('validation.attributes.car_receiving_way')" :value="__('validation.attributes.car_receiving_way')" :value="view(
                                                    'dashboard.reservation.components.car_receiving_way',
                                                    compact('reservation'),
                                                )" colorName="success" />

                                                <x-cards.information :placeholder="__('validation.attributes.notes')" :value="$reservation?->notes ?? '-----'" colorName="info"
                                                    pCol="col-12" />

                                                @if ($reservation->delivery_price > 0)
                                                    <x-cards.information :placeholder="__('validation.attributes.delivery_location')"
                                                        value='<a href="http://maps.google.com/maps?q={{ $reservation->delivery_lat }},{{ $reservation->delivery_long }}" target="_blank">{{ __(' validation.attributes.delivery_location') }}</a>'
                                                        colorName="success" />
                                                @endif
                                            </div>

                                            <div class="row justify-content-space layout-top-spacing">
                                                <div class="col-md-12 mb-4">
                                                    <h6>{{ __('general.services') }} :</h6>
                                                </div>

                                                @foreach ($reservation->services as $service)
                                                    <div class="col-md-4 mb-3">
                                                        <div
                                                            class="widget-content widget-content-area d-flex justify-content-around br-6 p-3">
                                                            <div class="col-md-2">
                                                                <img src="{{ $service?->icon }}" width="50"
                                                                    height="50" />
                                                            </div>

                                                            <div class="col-md-8 d-flex flex-column text-center">
                                                                <p>{{ $service?->name }} |
                                                                    {{ $service?->pivot?->is_one_time_payment == true ? __('dashboard.One Time Payment') : __('dashboard.Pay Per Day') }}
                                                                </p>
                                                                <hr class="m-0 mb-2"
                                                                    style="border-top: 1px solid #000000;">
                                                                <span>{{ __('dashboard.Price') }} :
                                                                    {{ $service?->pivot?->price ?: __('dashboard.free') }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach

                                                {{-- Add A New Card For Delivery Service --}}
                                                @if ($reservation->delivery_price > 0)
                                                <div class="col-md-4 mb-3">
                                                    <div
                                                        class="widget-content widget-content-area d-flex justify-content-around br-6 p-3">
                                                        <div class="col-md-2">
                                                            <img src="/assets/uploads/paid_services/delivery.png" width="50"
                                                                height="50" />
                                                        </div>

                                                        <div class="col-md-8 d-flex flex-column text-center">
                                                            <p>{{ __('general.delivery') }} |
                                                                {{ __('dashboard.One Time Payment') }}
                                                            </p>
                                                            <hr class="m-0 mb-2"
                                                                style="border-top: 1px solid #000000;">
                                                            <span>{{ __('dashboard.Price') }} :
                                                                {{ $reservation->delivery_price }}</span>
                                                        </div>
                                                    </div>
                                                </div>  
                                                @endif

                                                {{-- Add A New Card For Insurance Service --}}
                                                @if ($financial->insurance_total_price > 0)
                                                <div class="col-md-4 mb-3">
                                                    <div
                                                        class="widget-content widget-content-area d-flex justify-content-around br-6 p-3">
                                                        <div class="col-md-2">
                                                            <img src="/assets/uploads/paid_services/insurance.png" width="50"
                                                                height="50" />
                                                        </div>

                                                        <div class="col-md-8 d-flex flex-column text-center">
                                                            <p>@lang('general.insurance') | {{ __('dashboard.Pay Per Day') }}
                                                            </p>
                                                            <hr class="m-0 mb-2"
                                                                style="border-top: 1px solid #000000;">
                                                            <span>{{ __('dashboard.Price') }} :
                                                                {{ $financial->insurance_main_price }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif

                                            </div>

                                            {{-- <div class="col-12 col-md-6 shadow p-3 mb-5 bg-body rounded-3">
                                            <div class="timeline-line">
                                                @foreach ($reservation?->statuses as $status)
                                                <div class="item-timeline">
                                                    <p class="t-time mr-3">{{ $status?->created_at }}</p>
                                                    <div class="t-dot @switch($status->title)
                                                    @case('pending')
                                                        t-dot-primary
                                                        @break
                                                    @case('confirmed')
                                                        t-dot-success
                                                        @break
                                                    @case('canceled')
                                                        t-dot-danger
                                                        @break
                                                    @case('finished')
                                                        t-dot-dark
                                                        @break
                                                    @default
                                                        t-dot-warning
                                                @endswitch">
                                                    </div>
                                                    <div class="t-text">
                                                        <p>{{ $status?->title }}</p>
                                                        <p class="t-meta-time" style="max-width: none;">{{ $status?->notes }}</p>
                                                    </div>
                                                </div>
                                                @endforeach

                                            </div>
                                        </div> --}}

                                        </div>
                                    </div>

                                    <div class="tab-pane fade {{ current_tab('#branch-information') }}"
                                        id="branch-information" role="tabpanel" aria-labelledby="branch-information-tab">
                                        <div class="layout-px-spacing">

                                            <div class="row justify-content-space layout-top-spacing">
                                                <div class="col-md-12 mb-4">
                                                    <h6>{{ __('validation.attributes.branch') }} :</h6>
                                                </div>

                                                <x-cards.information :placeholder="__('dashboard.Name')" :value="$company->name .
                                                    ' | ' .
                                                    $branch->name .
                                                    ' | ' . $reservation?->city?->name"
                                                    colorName="secondary" />

                                                <x-cards.information :placeholder="__('dashboard.Email')" :value="$branch->email"
                                                    colorName="info" />

                                                <x-cards.information :placeholder="__('dashboard.Contact Number')" :value="$branch->contact_number"
                                                    colorName="success" />

                                                <x-cards.information :placeholder="__('branch.location_url')"
                                                    value="<a target='_blank' href='https://www.google.com/maps/search/?api=1&query={{ $branch?->lat }}%2C{{ $branch?->long }}&hl=ar'>{{ __('general.click_here') }}</a>" />

                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade {{ current_tab('#customer-information') }}"
                                        id="customer-information" role="tabpanel"
                                        aria-labelledby="customer-information-tab">
                                        <div class="layout-px-spacing">
                                            <div class="row justify-content-space layout-top-spacing">
                                                <div class="col-md-12 mb-4">
                                                    <h6>{{ __('dashboard.User Data') }} :</h6>
                                                </div>
                                                <x-cards.information :placeholder="__('dashboard.Username')" :value="$user?->name ?? '-----'"
                                                    colorName="secondary" />

                                                <x-cards.information :placeholder="__('dashboard.Email')" :value="$user?->email ?? '-----'"
                                                    colorName="info" />

                                                <x-cards.information :placeholder="__('dashboard.Mobile')" :value="$user?->mobile ?? '-----'"
                                                    colorName="success" />

                                                <x-cards.information :placeholder="__('dashboard.identification_number')" :value="$user?->identification_number ?? '-----'"
                                                    colorName="secondary" />

                                                <x-cards.information :placeholder="__('validation.attributes.date_of_birth')" :value="$user?->date_of_birth ?? '-----'"
                                                    colorName="info" />

                                                <x-cards.information :placeholder="__('user.age')" :value="$user?->date_of_birth
                                                    ? datesToYears($user?->date_of_birth, date('Y-m-d'))
                                                    : '-----'"
                                                    colorName="success" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade {{ current_tab('#extensions-information') }}"
                                        id="extensions-information" role="tabpanel"
                                        aria-labelledby="extensions-information-tab">
                                        <div class="layout-px-spacing">
                                            <div class="widget">

                                                <div class="widget-heading">
                                                    <h5 class="">@lang('general.extension')</h5>
                                                </div>

                                                <div class="widget-content">

                                                    <x-dtables.financial :with_filters="0" />

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade {{ current_tab('#finance-information') }}"
                                        id="finance-information" role="tabpanel"
                                        aria-labelledby="finance-information-tab">
                                        <div class="layout-px-spacing">
                                            <div class="row justify-content-space layout-top-spacing">
                                                <div class="row justify-content-space layout-top-spacing">
                                                    <div class="col-md-12 mb-4">
                                                        <h6>{{ __('dashboard.financial Data') }} :</h6>
                                                    </div>
                                                    <x-cards.information :placeholder="__('validation.attributes.number_of_days')" :value="$days_number ?? '-----'"
                                                        colorName="secondary" />

                                                    <x-cards.information :placeholder="__('dashboard.Original Price')" :value="$financial->final_price ?? '-----'"
                                                        colorName="info" />

                                                    <x-cards.information :placeholder="__('validation.attributes.duration_price')" :value="$financial->duration_price ?? '-----'"
                                                        colorName="success" />

                                                    <x-cards.information :placeholder="__('dashboard.insurance_main_price')" :value="$financial->insurance_main_price"
                                                        colorName="secondary" />

                                                    <x-cards.information :placeholder="__('dashboard.insurance_total_price')" :value="$financial->insurance_total_price ?? '-----'"
                                                        colorName="info" />

                                                    <x-cards.information :placeholder="__('dashboard.Total Services')" :value="$financial->services_price ?? '-----'"
                                                        colorName="success" />

                                                    <x-cards.information :placeholder="__('validation.attributes.vat')" :value="$financial?->vat_amount"
                                                        colorName="secondary" />

                                                    <x-cards.information :placeholder="__('validation.attributes.total_price_before_coupon') .
                                                        ' (' .
                                                        __('validation.attributes.including_tax') .
                                                        ')'" :value="$financial->total_price_with_tax +
                                                        $financial->discount_amount ??
                                                        '-----'"
                                                        colorName="info" />

                                                    <x-cards.information :placeholder="__('validation.attributes.discount_amount')" :value="$financial->discount_amount ?? '-----'"
                                                        colorName="success" />

                                                    <x-cards.information :placeholder="__('validation.attributes.discount_code')" :value="$reservation?->coupon?->code ?? '-----'"
                                                        colorName="secondary" />

                                                    <x-cards.information :placeholder="__('validation.attributes.total_price_with_tax')" :value="$financial?->total_price_with_tax ?? '-----'"
                                                        colorName="info" />

                                                    <x-cards.information :placeholder="__('validation.attributes.refunded_amounts')" :value="$financial?->refunded_amount ?? '-----'"
                                                        colorName="success" />

                                                    <x-cards.information :placeholder="__('financial.payment_serial_number')" :value="$financial?->payment_serial_number ?? '-----'"
                                                        colorName="success" />

                                                    <x-cards.information :placeholder="__('dashboard.Payment Method')" :value="view(
                                                        'dashboard.reservation.components.payment_method',
                                                        compact('reservation'),
                                                    )" colorName="secondary" />

                                                    <x-cards.information :placeholder="__('dashboard.was_the_wallet_balance_used')" :value="view(
                                                        'dashboard.reservation.components.is_wallet_payment',
                                                        compact('reservation'),
                                                    )" colorName="success" />

                                                    <x-cards.information :placeholder="__('dashboard.wallet_balance_used')" :value="$financial->wallet_payment_amount"
                                                        colorName="info" />

                                                    <x-cards.information :placeholder="__('dashboard.Paid Amount')" :value="$financial->paid_amount ?? '-----'"
                                                        colorName="secondary" />

                                                    <x-cards.information :placeholder="__(
                                                        'validation.attributes.remaining_amount_on_customer_for_company',
                                                    )" :value="$financial->remaining_amount ?? '-----'"
                                                        colorName="info" />

                                                    <x-cards.information :placeholder="__(
                                                        'validation.attributes.discount_amount',
                                                    )" :value="$financial->discount_amount ?? '-----'"
                                                        colorName="success" />

                                                    <x-cards.information :placeholder="__('validation.attributes.application_percentage')" :value="$financial?->application_percentage ??
                                                        '-----'"
                                                        colorName="secondary" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade {{ current_tab('#logs-information') }}"
                                        id="logs-information" role="tabpanel" aria-labelledby="logs-information-tab">
                                        <div class="layout-px-spacing">
                                            <div class="row justify-content-space ">
                                                {{-- <div class="col-md-12 mb-4">
                                                <h6>{{ __('dashboard.logs') }} :</h6>
                                            </div> --}}
                                                <div class="col-12 layout-spacing">
                                                    <div class="widget">

                                                        <div class="widget-heading">
                                                            <h5 class="">@lang('general.statuses_log')</h5>
                                                        </div>

                                                        <div class="widget-content">

                                                            {{-- start reservation statuses table --}}
                                                            <div class="filter-container">
                                                                <div class="d-inline-flex">
                                                                    <button class="btn btn-primary filter-button"> <i
                                                                            class="fas fa-filter"></i></button>
                                                                </div>

                                                                <div class="filters-inputs"></div>
                                                            </div>

                                                            <div class="table-responsive">
                                                                <table id="reservationStatusesTable"
                                                                    class="table table-hover text-center">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>#</th>
                                                                            <th>{{ __('validation.attributes.created_at') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.title') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.notes') }}
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tfoot>
                                                                        <tr>
                                                                            <th>#</th>
                                                                            <th>{{ __('validation.attributes.created_at') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.title') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.notes') }}
                                                                            </th>
                                                                        </tr>
                                                                    </tfoot>
                                                                </table>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 layout-spacing">

                                                    <div class="widget">

                                                        <div class="widget-heading">
                                                            <h5 class="">@lang('general.activities_log')</h5>
                                                        </div>

                                                        <div class="widget-content">

                                                            {{-- start reservation activities table --}}
                                                            <div class="filter-container">
                                                                <div class="d-inline-flex">
                                                                    <button class="btn btn-primary filter-button"> <i
                                                                            class="fas fa-filter"></i></button>
                                                                </div>

                                                                <div class="filters-inputs"></div>
                                                            </div>

                                                            <div class="table-responsive">
                                                                <table id="reservationActivitiesTable"
                                                                    class="table table-hover text-center">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>#</th>
                                                                            <th>{{ __('validation.attributes.created_at') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.title') }}
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tfoot>
                                                                        <tr>
                                                                            <th>#</th>
                                                                            <th>{{ __('validation.attributes.created_at') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.title') }}
                                                                            </th>
                                                                        </tr>
                                                                    </tfoot>
                                                                </table>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 layout-spacing">
                                                    <div class="widget">
                                                        <div class="widget-heading">
                                                            <h5 class="">@lang('general.transactions_log')</h5>
                                                        </div>

                                                        <div class="widget-content">
                                                            {{-- start reservation transactions table --}}
                                                            <div class="filter-container">
                                                                <div class="d-inline-flex">
                                                                    <button class="btn btn-primary filter-button"> <i
                                                                            class="fas fa-filter"></i></button>
                                                                </div>

                                                                <div class="filters-inputs"></div>
                                                            </div>

                                                            <div class="table-responsive">
                                                                <table id="reservationTransactionsTable"
                                                                    class="table table-hover text-center">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>#</th>
                                                                            <th>{{ __('validation.attributes.created_at') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.description') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.amount') }}
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tfoot>
                                                                        <tr>
                                                                            <th>#</th>
                                                                            <th>{{ __('validation.attributes.created_at') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.description') }}
                                                                            </th>
                                                                            <th>{{ __('validation.attributes.amount') }}
                                                                            </th>
                                                                        </tr>
                                                                    </tfoot>
                                                                </table>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>


                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <x-bootstrap.modal id="notesModal" content="dashboard.reservation.modals.notes_form" :title="__('dashboard.reservation_note')" :data='["reservation" => $reservation]' />

        <x-modal id="cancelModal" :title="__('reservation.cancellation_of_reservation')" titleBackground="#e7515a" titleColor="#fff">
            <form method="POST"
                action="{{ route('dashboard.reservation.cancel', ['reservation' => $reservation->id]) }}">
                @csrf
                <x-fields.input placeholder="{{ __('reservation.cancel_reason') }}" pCol="col-12" name="cancel_reason"
                    required="required" />
                @if ($reservation?->payment_method == 'credit_card' || $reservation?->payment_method == 'credit_card_with_wallet')
                    <x-fields.input pClass="credit_amount" type="number"
                        placeholder="{{ __('reservation.credit_amount') }}" pCol="col-12" :value="$financial?->paid_amount - $financial?->wallet_payment_amount"
                        name="credit_amount" step="any" />
                @endif
                <x-fields.input pClass="wallet_amount" type="number"
                    placeholder="{{ __('reservation.wallet_amount') }}" pCol="col-12" :value="$financial?->wallet_payment_amount > 0 ? $financial?->wallet_payment_amount : 0"
                    name="wallet_amount" step="any" />
                <input type="submit" class="btn btn-danger" value="@lang('general.submit')" />
            </form>
        </x-modal>

        <x-modal id="finishModal" :title="__('general.finish_reservation')" titleBackground="#805DCA" titleColor="#fff">
            <form id="finishForm" method="POST"
                action="{{ route('dashboard.reservation.finish', ['reservation' => $reservation->id]) }}">
                @csrf
                <div class="row mb-3">
                    <x-fields.input placeholder="{{ __('validation.attributes.actual_use_days') }}"
                        cClass="actual_use_days" type="number" pCol="col-12" name="actual_use_days"
                        value="1" required="required" />

                    <x-fields.input placeholder="{{ __('validation.attributes.deduction_percentage') }}"
                        cClass="deduction_percentage" type="number" pCol="col-12" name="deduction_percentage"
                        value="0" required="required" />

                    <div class="col-md-12">
                        <a href="javascript:void(0)" id="calculate_finish"
                            class="badge badge-secondary rounded calculate_finish w-100"><img width="35"
                                height="35" src="https://img.icons8.com/plasticine/100/estimate.png"
                                alt="estimate" /></a>
                    </div>
                </div>

                <div class="calculate_finish_result alert"></div>

                <div class="finishing-container d-none">
                    @if ($reservation?->payment_method == 'credit_card' || $reservation?->payment_method == 'credit_card_with_wallet')
                        <x-fields.input pClass="credit_amount" type="number"
                            placeholder="{{ __('reservation.credit_amount') }}" pCol="col-12" name="credit_amount"
                            required="required" step="any" />
                    @endif

                    <x-fields.input pClass="wallet_amount" type="number"
                        placeholder="{{ __('reservation.wallet_amount') }}" pCol="col-12" :value="$financial?->wallet_payment_amount > 0 ? $financial?->wallet_payment_amount : 0"
                        required="required" name="wallet_amount" step="any" />

                    <x-fields.input placeholder="{{ __('validation.attributes.return_date') }}"
                        cClass="return_date basicFlatpickr" type="date" pCol="col-12" name="return_date"
                        required="required" />

                    <x-fields.input placeholder="{{ __('validation.attributes.finishing_reason') }}"
                        cClass="finishing_reason" type="text" pCol="col-12" name="finishing_reason"
                        required="required" value="إنهاء حجز مبكر" />

                    <input type="submit" class="submit-finish btn btn-secondary" value="@lang('general.submit')" />
                </div>
            </form>
        </x-modal>
    @endsection

    @section('customScript')
    <script src='{{ asset("dashboard/$locale/plugins/table/datatable/button-ext/dataTables.buttons.min.js") }}'></script>
    <script src='{{ asset("dashboard/$locale/plugins/table/datatable/button-ext/jszip.min.js") }}'></script>
    <script src='{{ asset("dashboard/$locale/plugins/table/datatable/button-ext/buttons.html5.min.js") }}'></script>
    <script src='{{ asset("dashboard/$locale/plugins/table/datatable/button-ext/buttons.print.min.js") }}'></script>
    
        <script>
            $("#reservations-menu-box").attr("data-active", "true")
        </script>

        <script>
            $('#finishForm').on('submit', function(event) {
                event.preventDefault();
            });

            $(".calculate_finish").on('click', function() {
                $.ajax({
                    url: "{{ route('dashboard.reservation.calculate_finish', ['reservation' => $reservation]) }}",
                    type: 'post',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        actual_use_days: $('.actual_use_days').val(),
                        deduction_percentage: $('.deduction_percentage').val(),
                        finishing_reason: $('.finishing_reason').val(),
                    },
                    success: function(result) {
                        if (result.status == false) {
                            $('.calculate_finish_result').html('').removeClass('alert-warning').addClass(
                                'alert-danger');

                            $.each(result.message, function(key, value) {
                                $('.calculate_finish_result').append(value);
                            });

                        } else {
                            $('.calculate_finish_result').html('').removeClass('alert-danger').addClass(
                                'alert-warning').html(result.message);

                            $('#finishModal #finishForm .finishing-container').removeClass('d-none')

                            $('.finishing-container .credit_amount input').val(result.finish_price)

                            $('#finishForm').off('submit');
                        }
                    },
                });
            });

            $('.actual_use_days, .deduction_percentage').on('change input keyup', function() {
                /* $('.finishing-container input').val(''); */

                $('.finishing-container').addClass('d-none');

                $('.calculate_finish_result ').html('');
            });
        </script>

        <script>
            $(".contact_status_container .contact_status").on('click', function() {
                var contact_status = $(this);
                $.ajax({
                    url: "{{ route('dashboard.reservation.contact_status', ['reservation' => $reservation]) }}",
                    type: 'GET',
                    data: {
                        contact_status: contact_status.data("value"),
                    },
                    success: function(result) {
                        if (result.contact_status == "contacted") {
                            contact_status.parent().parent().find(".btn").removeClass("btn-warning");
                            contact_status.parent().parent().find(".btn").removeClass("btn-outline-dark");
                            contact_status.parent().parent().find(".btn").addClass("btn-success");
                            contact_status.parent().parent().find(".btn").find('span').html(
                                "@lang('validation.attributes.contacted')")
                            contact_status.parent().parent().find(".btn").find('span').addClass(
                                "text-white")
                        } else if (result.contact_status == "not_contacted") {
                            contact_status.parent().parent().find(".btn").removeClass("btn-success");
                            contact_status.parent().parent().find(".btn").removeClass("btn-outline-dark");
                            contact_status.parent().parent().find(".btn").addClass("btn-warning");
                            contact_status.parent().parent().find(".btn").find('span').html(
                                "@lang('validation.attributes.not_contacted')")
                            contact_status.parent().parent().find(".btn").find('span').addClass(
                                "text-white")
                        }
                    },
                });
            });

            $(".car_receiving_status_container .car_receiving_status").on('click', function() {
                var car_receiving_status = $(this);
                $.ajax({
                    url: "{{ route('dashboard.reservation.car_receiving_status', ['reservation' => $reservation]) }}",
                    type: 'GET',
                    data: {
                        car_receiving_status: car_receiving_status.data("value"),
                    },
                    success: function(result) {
                        if (result.car_receiving_status == "received") {
                            car_receiving_status.parent().parent().find(".btn").removeClass("btn-warning");
                            car_receiving_status.parent().parent().find(".btn").removeClass(
                                "btn-outline-dark");
                            car_receiving_status.parent().parent().find(".btn").addClass("btn-success");
                            car_receiving_status.parent().parent().find(".btn").find('span').html(
                                "@lang('general.received')")
                            car_receiving_status.parent().parent().find(".btn").find('span').addClass(
                                "text-white")
                        } else if (result.car_receiving_status == "not_received") {
                            car_receiving_status.parent().parent().find(".btn").removeClass("btn-success");
                            car_receiving_status.parent().parent().find(".btn").removeClass(
                                "btn-outline-dark");
                            car_receiving_status.parent().parent().find(".btn").addClass("btn-warning");
                            car_receiving_status.parent().parent().find(".btn").find('span').html(
                                "@lang('general.not_received')")
                            car_receiving_status.parent().parent().find(".btn").find('span').addClass(
                                "text-white")
                        }
                    },
                });
            });

            $(".refund_status_container .refund_status").on('click', function() {
                var refund_status = $(this);
                $.ajax({
                    url: "{{ route('dashboard.reservation.refund_status', ['reservation' => $reservation]) }}",
                    type: 'GET',
                    data: {
                        refund_status: refund_status.data("value"),
                    },
                    success: function(result) {
                        if (result.refund_status == "refunded") {
                            refund_status.parent().parent().find(".btn").removeClass("btn-warning");
                            refund_status.parent().parent().find(".btn").removeClass("btn-outline-dark");
                            refund_status.parent().parent().find(".btn").addClass("btn-success");
                            refund_status.parent().parent().find(".btn").find('span').html(
                                "@lang('general.refunded')")
                            refund_status.parent().parent().find(".btn").find('span').addClass("text-white")
                        } else if (result.refund_status == "not_refunded") {
                            refund_status.parent().parent().find(".btn").removeClass("btn-success");
                            refund_status.parent().parent().find(".btn").removeClass("btn-outline-dark");
                            refund_status.parent().parent().find(".btn").addClass("btn-warning");
                            refund_status.parent().parent().find(".btn").find('span').html(
                                "@lang('general.not_refunded')")
                            refund_status.parent().parent().find(".btn").find('span').addClass("text-white")
                        } else if (result.refund_status == "without_refund") {
                            refund_status.parent().parent().find(".btn").removeClass("btn-success");
                            refund_status.parent().parent().find(".btn").removeClass("btn-outline-dark");
                            refund_status.parent().parent().find(".btn").addClass("btn-warning");
                            refund_status.parent().parent().find(".btn").find('span').html(
                                "@lang('general.without_refund')")
                            refund_status.parent().parent().find(".btn").find('span').addClass("text-white")
                        }
                    },
                });
            });

            $("body").on('change', "#cancelModal .refund_type", function() {
                var element = $(this);
                if (element.val() == "refund_part") {
                    $('.part_amount').removeClass("d-none");
                } else {
                    $('.part_amount').addClass("d-none");
                }
            });
        </script>

        <script>
            var reservationStatusesTable = initializeDataTable("#reservationStatusesTable", {
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: "created_at",
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: "title"
                    },
                    {
                        data: "notes"
                    },
                ]
            }, {
                subPlace: "reservation_statuses_table"
            });
        </script>

        <script>
            var reservationActivitiesTable = initializeDataTable("#reservationActivitiesTable", {
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: "created_at",
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: "title"
                    },
                ]
            }, {
                subPlace: "reservation_activities_table"
            });
        </script>

        <script>
            var reservationTransactionsTable = initializeDataTable("#reservationTransactionsTable", {
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: "created_at",
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: "description"
                    },
                    {
                        data: "amount"
                    },
                ]
            }, {
                subPlace: "reservation_transactions_table"
            });
        </script>

    @endsection