@extends('Partners.Layouts.Page')

@section('styles')
    <style>
        .booking-item {
            padding: 1rem;
            background-color: #fff;
            border-radius: 14px;
            box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
            -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
            -moz-box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
            -o-box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
        }

        .booking-item-info {
            margin-right: 20px;
        }

        .status-badge {
            position: absolute;
            top: -1rem;
            bottom: -1rem;
            right: -1rem;
            border-radius: 0 14px 14px 0;
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center
        }

        .status-badge .text {
            transform: rotate(90deg);
        }

        .price-row {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .price-row strong {
            font-size: 1.25rem;
            font-weight: 900;
            color: #49BFB6
        }

        .price-row button {
            width: 35px;
            height: 35px;
            border-radius: 50px;
            border: 0;
            font-size: 20px;
        }
    </style>

    <style>
        body.mobile #booking-details-wrap {
            position: fixed;
            top: -50px;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99999999;
            background-color: #fff;
            overflow-x: scroll;
            padding: 0;
        }
        body.mobile #booking-details-wrap > .row{
            padding: 1rem;
        }
        body.mobile #go-back {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 50px;
            border-left: 2px solid #e7e7e7;
            background: transparent;
            border-bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header {
            display: none;
            position: relative;
        }

        body.mobile header{
            display: block;
            box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
            -webkit-box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
            -moz-box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
            -o-box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
            padding: 1rem;
        }
        body.mobile header h5{
            color: var(--main-color);
        }
        .data-container-header{
            color: var(--main-color);
        }
        .data-container {
            padding: 1rem;
            border: 1px solid #e7e7e7;
            border-radius: 22px;
            margin-top: .5rem;
        }
        .data-container .container-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 13px 0
        }
        .white-button {
            font-size: 13px;
            padding: 5px 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
            color: var(--main-color);
            font-weight: 700;
            box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
            -webkit-box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
            -moz-box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
            -o-box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
        }
        .white-button.with-icon {
            display: flex;
            align-items: center;
            margin-left: 1rem;
            justify-content: center;
        }
        .white-button.with-icon i {
            font-size: 20px;
            margin: 0 4px;
        }
        .column-value {
            font-family: tahoma, sans-serif;
        }

        .invalid-user .info-balloon {
            background-color: #e74c3c;
            border-color: #e74c3c;
            color: #ffffff;
        }
    </style>
@endsection

@section('content')

    <!-- Show Booking -->
    <div class="modal fade" id="show-booking" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg"></div>
    </div>

    <div class="modal fade" id="show-verified-message" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">لم يتم التحقق</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body" style="font-size:1.1rem;">
                    يرجى الطلب من الضيف التحقق من بياناته وتوثيقها اولاً وعدم السماح بالدخول للعقار ، مع العلم بان المضيف المسؤول قانونيا امام الجهات المختصة في حال دخول الضيف دون توثيق حسابه و مبيت يخلي مسؤوليته القانونيه تجاه ذلك
                </div>

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

    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"><a href="{{partner_route()}}">الرئيسية /</a></h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">{{$page_title}}</span>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->

    @include('Partners.Reservations.Booking.Statics')

    @foreach($rows as $row)
        <div class="booking-item booking-show-button mt-3" data-target-booking="{{$row->fake_id}}" data-bs-toggle="modal" data-bs-target="#show-booking">
            <div class="row">
                <div class="col-md-8 col-6">

                    {!! bookings_partner_badge($row) !!}

                    <div class="booking-item-info">
                        <p class="text-dark"><strong>#{{$row->fake_id}}</strong></p>
                        <h5  style="color: var(--main-color)">{{$row->unit->name_ar}}</h5>

                        <div style="display: flex;align-items: center;" class="text-muted">
                            <label class="m-3">من</label>

                            <div class="dates">
                                {!! booking_date($row->from) !!}
                            </div>
                        </div>

                        <div style="display: flex;align-items: center;" class="text-muted">
                            <label class="m-3">الى</label>

                            <div class="dates">
                                {!! booking_date($row->to) !!}
                            </div>
                        </div>

                        <div class="invalid-user">
                            {!! isVerifiedUser($row->user->nafath_validated) !!}

                            @if(!$row->user->nafath_validated)
                                <span class="info-balloon" data-bs-toggle="modal" data-bs-target="#show-verified-message">
                                    <i class="fa fa-question"></i>
                                </span>
                            @endif
                        </div>
                    </div>

                </div>