@extends('branch.layouts.index')

@section('content')

        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link show active" data-toggle="tab" href="#client_detail">{{__("global.client_detail")}}</a></li>
            <li class="nav-item"><a class="nav-link "  data-toggle="tab" href="#reservation_details">{{__("global.reservation_details")}}</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="client_detail" role="tabpanel">

                <div class="container my-4">
                    <div class="row justify-content-center">

                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label for="name">
                                        {{__("validation.attributes.name")}} <span class="text-danger">*</span>
                                    </label>

                                    <div class="col-sm-12">
                                        <input disabled  placeholder="{{__("validation.attributes.name")}}" value="{{ $user->name }}" class="form-control tooltips">
                                    </div>

                                </div>
                            </div>

                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label for="name">
                                        {{__("validation.attributes.phone")}} <span class="text-danger">*</span>
                                    </label>

                                    <div class="col-sm-12">
                                        <input disabled  placeholder="{{__("validation.attributes.phone")}}" value="{{ $user->phone }}" class="form-control tooltips">
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label for="email">
                                        {{__("validation.attributes.email")}} <span class="text-danger">*</span>
                                    </label>

                                    <div class="col-sm-12">
                                        <input disabled  placeholder="{{__("validation.attributes.email")}}" value="{{ $user->email }}" class="form-control tooltips">
                                    </div>

                                </div>
                            </div>

                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label for="name">
                                        {{__("global.orders")}} <span class="text-danger">*</span>
                                    </label>

                                    <div class="col-sm-12">
                                        <input disabled  placeholder="{{__("validation.attributes.email")}}" value="{{ $orders->count() }}" class="form-control tooltips">
                                    </div>

                                </div>
                            </div>

{{--                            <div class="col-lg-6 col-12">--}}
{{--                                <div class="form-group">--}}

{{--                                    <label for="name">--}}
{{--                                        {{__("global.total")}} <span class="text-danger">*</span>--}}
{{--                                    </label>--}}
{{--                                    <div class="col-sm-12">--}}
{{--                                        <input disabled  placeholder="{{__("global.total")}}" value="{{ $orders->count() }}" class="form-control tooltips">--}}
{{--                                    </div>--}}

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

                     </div>
                </div>



            </div>
            <div class="tab-pane fade" id="reservation_details" role="tabpanel">

                <h4 class="card-title mb-3">
                    <div class="filter-container h6" data-table="#ordersTable">
                        <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i> @lang('global.filters')</button>

                        <div class="filters-inputs">
                            <x-dashboard.form.form action='#'>
                                <x-dashboard.form.select name="day" :title="__('global.during_day')" :data-array="range(1,31)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                                <x-dashboard.form.select name="month" :title="__('global.during_month')" :data-array="range(1,12)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                                <x-dashboard.form.select name="year" :title="__('global.during_year')" :data-array="range(2021,date('Y'))" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                                <x-dashboard.form.input name="dateRange" :title="__('global.between_two_dates')" class="flatpickrTwoDatesMaxToday" container-classes='col-lg-3 col-12' :required="false" />
                                <x-dashboard.form.select name="status" :title="__('global.order_status')" :data-array="$statuses" :name-fn='fn($order_status) => __("global.$order_status")' :with-all="true" :required="false" :ajax="false" />
                                <x-dashboard.form.select name="payment_method" :title="__('global.payment_method')" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.spa_payment_methods.$payment_method")' :with-all="true" :required="false" :ajax="false" />
                                <x-dashboard.form.button :title="__('global.clear_filters')" icon="i-Reset" type='button' color='dark' class="clear" />
                            </x-dashboard.form.form>
                        </div>

                    </div>
                </h4>

                <div class="table-responsive">
                    <table id="ordersTable" class="table table-striped table-bordered dt">
                        <thead>
                        <tr>
                            <th>@lang("global.reservation_number") </th>
                            <th>@lang("global.reservation_date") </th>
                            <th>@lang("global.service")</th>
                            <th>@lang("validation.attributes.name") </th>
                            <th>@lang("validation.attributes.phone") </th>
                            <th>@lang("validation.attributes.room")</th>
                            <th>@lang("validation.attributes.total_price") </th>
                            <th>@lang("global.paid_amount") </th>
                            <th>@lang("global.payment_method") </th>
                            <th>@lang("validation.attributes.notes") </th>
                            <th>@lang("validation.attributes.status") </th>
                            <th>@lang("validation.attributes.created_at") </th>
                            <th>@lang("global.actions")</th>
                        </tr>
                        </thead>
                    </table>
                </div>

                <x-bootstrap.modal id="rejectOrderModal" content='spa.orders.modals.reject' :with-header="false" />
                <x-bootstrap.modal id="showOrderModal" content-type='empty' content='' width='xl' />

            </div>
        </div>






@endsection

@push("footer_assets")

    <div class="modal fade" id="editOrderModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">

                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">{{ __('global.edit_order') }}</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">

                    <form id="editOrderForm">
                        @csrf

                        <input type="hidden" name="order_id" id="edit_order_id">

                        <div class="form-group">
                            <label>{{ __('global.new_appointment') }}</label>
                            <input type="datetime-local" name="appointment_start_time" id="edit_order_date" class="form-control" required>
                        </div>

                        <button class="btn btn-primary btn-block mt-3">
                            {{ __('global.save_changes') }}
                        </button>
                    </form>

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

    <style>
        .modal-header .close {
            padding: 0;
            margin: 0;
        }

        .modal-title {
            color: white;
        }
    </style>

    <script>
        $(document).on("click", ".edit-order", function () {

            $("#edit_order_id").val($(this).data("id"));
            $("#edit_order_date").val($(this).data("date").replace(" ", "T"));

            $("#editOrderModal").modal("show");
        });

        $("#editOrderForm").on("submit", function (e) {
            e.preventDefault();

            $.ajax({
                url: "{{route('branch.branch.orders.update')}}",
                type: "POST",
                data: $(this).serialize(),
                success: function (res) {

                    $("#editOrderModal").modal("hide");
                    $("#ordersTable").DataTable().ajax.reload(null, false);

                    toastr.success("{{ __('global.edit_success') }}");
                },
                error: function () {
                    toastr.error("{{ __('global.edit_error') }}");
                }
            });
        });
    </script>
@endpush