@extends('admin.layouts.container')

<style>
    .mail_nstar{
        background-color: #fff;
        padding: 1vw;
        color: #151515;
    }

    .mail_content{
        padding: 40px 40px 40px 20px;
        background-color: #f5f5f5;
        border: 15px solid #9993;
        display: flex;
        flex-wrap: wrap;
    }

    .logo{
        margin-bottom: 30px;
    }

    .logo img{
        /* margin: 15px; */
    }

    .mail_card{
        padding: 30px;
        border: 1px solid #9994;
        margin-bottom: 30px;
        width: calc(33% - 30px);
        margin-left: 30px;
        height: max-content;
    }

    .qr_card{
        margin-bottom: 30px;
        width: calc(33% - 30px);
        margin-left: 30px;
    }

    .mail_card p{
        color: #555;
        margin-bottom: 15px;
        font-size: 12px;
    }

    .mail_card h5{
        margin: 0;
        font-size: 22px;
    }

    .mail_card.w_50{
        width: calc(50% - 30px);
    }

    .mt_30{
        margin-top: 30px;
    }

    .mt_50{
        margin-top: 50px;
    }



    /* ---------- responsive ---------- */

    @media screen and (max-width: 991px) {
        .mail_content{
            padding: 20px;
        }
        .mail_card{
            width: 100%;
            margin-left: 0;
            margin-bottom: 20px;
        }
        .mail_card.w_50{
            width: 100%;
        }
    }
</style>

@section('content')
    <div class="side-title">
        <h3>{{$head ?? '' }}</h3>
    </div>

    <div class="border-item">
        <form class="form-row">
            <div class="form-group col-lg-3">
                <label>{{ meta('name', $lang) ?? __('roomReservations.name') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->name }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('email', $lang) ?? __('roomReservations.email') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->email }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('phone', $lang) ?? __('roomReservations.phone') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->phone }}'/>
            </div>

            <div class="form-group col-lg-3">
                <label>{{ meta('branch_id', $lang) ?? __('roomReservations.branch_id') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->branchName }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('room_type_id', $lang) ?? __('roomReservations.room_type_id') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->roomTypeName }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('room_id', $lang) ?? __('roomReservations.room_id') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->roomName }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('start_date', $lang) ?? __('roomReservations.start_date') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->start_date }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('end_date', $lang) ?? __('roomReservations.end_date') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->end_date }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('days_count', $lang) ?? __('roomReservations.days_count') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->days_count }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('total', $lang) ?? __('roomReservations.total') }} </label>
                <input readonly class="form-control bg-white" value='{{  $reservation->total }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('pay_way', $lang) ?? __('roomReservations.pay_way') }} </label>
                <input readonly class="form-control bg-white" value='{{  __('roomReservations.'.$reservation->pay_way) }}'/>
            </div>
            <div class="form-group col-lg-12">
                <button type="button" class="btn btn-primary text-capitalize" data-toggle="modal" data-target="#exampleModal">
                    {{ __('roomReservations.show_bill') }}
                </button>
            </div>

            {{--Start image container--}}
            <div class="form-group col-lg-12 image_container">
                <label>{{ meta('id_image', $lang) ?? __('roomReservations.id_image') }} </label>
                <div class="photos main_photo wow fadeInUp">
                    <div class="col-md-6">
                        <div class="items">
                            <div class="img">
                                <a href="{{asset($reservation->id_image)}}" id="lfm" data-input=".image_thumbnail" data-fancyBox data-preview=".image_holder" data-hide=".pick_button">
                                    <img src="{{asset($reservation->id_image)}}"  id="image_holder" class="image_holder"/>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <a class="btn btn-success btn-sm w-25" download href="{{asset($reservation->id_image)}}"><i class="fa fa-download"></i> {{__('dashboard.download')}}</a>
                    </div>
                </div>
            </div>
        {{--End image container--}}

        <!-- Button trigger modal -->


            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{ __('roomReservations.bill_details') }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="mail_nstar">
                                <div class="mail_content">
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.name')}}</p>
                                        <h5>{{$reservation->name}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.email')}}</p>
                                        <h5>{{{$reservation->email}}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.phone')}}</p>
                                        <h5>{{$reservation->phone}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.branch_id')}}</p>
                                        <h5>{{$reservation->branchName}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.room_type_id')}}</p>
                                        <h5>{{$reservation->roomTypeName}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.room_id')}}</p>
                                        <h5>{{$reservation->roomName}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.start_date')}}</p>
                                        <h5>{{$reservation->start_date}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.end_date')}}</p>
                                        <h5>{{$reservation->end_date}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.days_count')}}</p>
                                        <h5>{{$reservation->days_count}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.pay_way')}}</p>
                                        <h5>{{__('roomReservations.'.$reservation->pay_way)}}</h5>
                                    </div>
                                    <div class="mail_card">
                                        <p>{{__('roomReservations.total')}}</p>
                                        <h5> {{$reservation->total}}  </h5>
                                    </div>
                                    <div class="qr_card text-center">
                                        <img src="{{$qrCode['qr_code']}}" alt="" height="125px" width="125px" class="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="text-center mt-5 col-12">
                <a href="{{route('roomReservations.index')}}" class="butn"><span>{{ __('roomReservations.head') }}</span></a>
            </div>
        </form>
    </div>

@endsection

@section('inner_js')


@endsection