@extends('back_office.layouts.app')

@section('content')
    <style>
        th,td {
            font-family: DejaVu Sans;
            font-size:12px;
        }
        table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 0px;
            border-spacing: 0;
            border-collapse: collapse;
            background-color: transparent;
        }
        thead  {
            text-align: left;
            display: table-header-group;
            vertical-align: middle;
        }
        th, td  {
            border: 1px solid #ddd;
            padding: 6px;
        }
        .well {
            min-height: 20px;
            padding: 19px;
            margin-bottom: 20px;
            background-color: #f5f5f5;
            border: 1px solid #e3e3e3;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
        }
    </style>
    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-header overflow-hidden">
                    <div class="row gx-4">
                        <div class="col-auto my-auto">
                            <div class="">
                                <h5 class="mb-1">
                                    {{ $guest->full_name }}
                                </h5>
                                <p class="mb-0 font-weight-bold text-sm">
                                    <b>Email:</b> {{ $guest->email }}
                                </p>
                                <p class="mb-0 font-weight-bold text-sm">
                                    <b>Phone Number:</b> {{ $guest->phone_number }}
                                </p>
                                <p class="mb-0 font-weight-bold text-sm">
                                    <b>Account Created At:</b> {{ $guest->created_at->format('d-m-Y') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--MODAL -->
            <div class="modal fade" id="notification" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form class="form-horizontal" action="{{ route('send_notification') }}" enctype="multipart/form-data" method="POST">
                            @csrf
                            <div class="modal-body">
                                <input type="hidden" name="user_id" id="user_id" value="" />
                                <div class="form-group">
                                    <label>Title</label>
                                    <input class="form-control" type="text" placeholder="title" name="title" id="title" />
                                </div>
                                <div class="form-group">
                                    <label>Message</label>
                                    <textarea class="form-control" type="text" placeholder="message" name="message" id="message"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" onclick="getUserID({{$guest->id}})" class="btn btn-info">Send Notification</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="sms" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form class="form-horizontal" action="{{ route('send_message') }}" enctype="multipart/form-data" method="POST">
                            @csrf
                            <div class="modal-body">
                                <input type="hidden" name="customer_id" id="customer_id" value="" />
                                <div class="form-group">
                                    <label>Message</label>
                                    <input class="form-control" type="text" placeholder="message" name="message" id="message" />
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" onclick="getCustomerID({{$guest->id}})" class="btn btn-info">Send Message</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="email" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form class="form-horizontal" action="{{ route('send_email') }}" enctype="multipart/form-data" method="POST">
                            @csrf
                            <div class="modal-body">
                                <input type="hidden" name="id" id="id" value="" />
                                <div class="form-group">
                                    <label>Mail</label>
                                    <input class="form-control" type="text" placeholder="mail" name="mail" id="mail" />
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" onclick="getID({{$guest->id}})" class="btn btn-info">Send Email</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @if(count($guest->subscriptions) > 0)
                @foreach($guest->subscriptions as $subscription)
                    <div class="col-12 mt-3">
                        <div class="card">
                            <div class="card-header">
                                <div class="float-end mr-4">
                                    {{--                        <i class="fas fa-award opacity-10" aria-hidden="true"> {{$loop->index + 1}}</i>--}}
                                    @if($subscription->freeze == 0)
                                        <a class="badge mb-2 badge-pill bg-danger" href="{{route('freeze_option', $subscription->id)}}">Freeze</a>
                                    @else
                                        <a class="badge mb-2 badge-pill bg-dark text-center" href="{{route('freeze_option', $subscription->id)}}">Unfreeze</a>
                                    @endif
                                </div>
                                <h6 class="mb-0"> <i class="fas fa-tag"></i>  {{$subscription->package->name}}
                                    @if($subscription->freeze == 0)
                                        <span class="badge badge-pill bg-success">Active</span>
                                    @else
                                        <span class="badge badge-pill bg-secondary">Inactive</span>
                                    @endif
                                </h6>
                                <h5 class="mb-0">{{$subscription->package->monthly_price}} <small>QAR</small> <small class="fs-6">/month</small></h5>
                                <br>
                                <span class="text-xs">
                        <b><i class="far fa-calendar" style="color: green"></i> Subscription start date:</b> {{ $subscription->start_date }}
                        <br>
                        <br>
                        <b><i class="far fa-calendar" style="color: red"></i> Subscription end date:</b> {{ $subscription->end_date }}
                    </span>
                            </div>
                            <hr class="horizontal dark my-3">
                            <div class="card-body pt-0 p-3 row">
                                <div class="col-12">
                                    @php
                                        $days = \App\Models\Day::whereIn('id', json_decode($subscription->package_days->days))->get();
                                    @endphp
                                    <h6><i class="fas fa-hand-sparkles"></i> Wash days:</h6>
                                    @foreach($days as $day)
                                        <span class="badge badge-sm bg-info mb-2" style="margin-right: 2px; margin-left: 5px"> {{ $day->name }} </span>
                                    @endforeach
                                    <hr class="horizontal dark my-3">
                                    @foreach($subscription->cars as $car)
                                        <h6> <i class="fas fa-car"></i> Customer Car:
                                            <div class="float-end mr-4">
                                                <a style="cursor: pointer" class="badge mb-2 badge-pill bg-gradient-info text-center"  data-toggle="modal" data-target="#car">Update Car Details</a>
                                                <a style="cursor: pointer" class="badge mb-2 badge-pill bg-gradient-info text-center"  data-toggle="modal" data-target="#location">Update Car Location</a>
                                            </div>
                                        </h6>
                                        <ul>
                                            <li>Car type: {{$car->type->name}}</li>
                                            <li>Car model: {{$car->model->name}}</li>
                                            <li>Car brand: {{$car->brand->name}}</li>
                                            <div class="row">
                                                <div class="col-2">
                                                    <li>Car color:</li>
                                                </div>
                                                <div class="col-1" style="width:25px; height:25px; background-color: {{$car->color}}">
                                                </div>
                                            </div>
                                            @if($car->location->compound_name && $car->location->near_building_name)
                                                <li>Car location: {{$car->location->area}},{{$car->location->street_name}},{{$car->location->compound_name}},{{$car->location->near_building_name}}</li>
                                            @elseif($car->location->compound_name && $car->location->near_building_name == null)
                                                <li>Car location: {{$car->location->area}},{{$car->location->street_name}},{{$car->location->compound_name}}</li>
                                            @elseif($car->location->compound_name==null && $car->location->near_building_name)
                                                <li>Car location: {{$car->location->area}},{{$car->location->street_name}},{{$car->location->near_building_name}}</li>
                                            @else
                                                <li>Car location: {{$car->location->area}},{{$car->location->street_name}}</li>
                                            @endif
                                            <li>Plate number: <span style="border: 1px solid; padding: 2px 15px 2px 15px"> {{$car->plate_number}}</span></li>
                                        </ul>

                                </div>

                                <div class="modal fade" id="car" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <form class="form-horizontal" action="{{ route('update-car-details', $car->id) }}" enctype="multipart/form-data" method="POST">
                                                @csrf
                                                <div class="modal-body">
                                                    <input type="hidden" name="car_id" id="car_id" value="" />
                                                    <input type="hidden" id="customer" value="{{$guest->id}}" />
                                                    <div class="form-group">
                                                        <label>Car type</label>
                                                        <input type="text" value="{{$car->type->name}}" name="type" id="type" class="form-control" readonly/>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Car brand</label>
                                                        @php
                                                            $brands = \App\Models\CarBrand::all();
                                                        @endphp
                                                        <select name="brand" id="brand" class="form-control dynamic" data-dependent="models" onchange="getModels()">
                                                            <option value="{{ $car->brand->id }}">{{ $car->brand->name }}</option>
                                                            @foreach ( $brands as $brand )
                                                                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                            @endforeach
                                                        </select>
                                                        <br>
                                                        @foreach($brands as $brand)
                                                            <label id="label" style="display: none;">Car model</label>
                                                            <div class="some"  id="some_{{ $brand->id }}"  style="display:none;">
                                                                <select name="model" id="model" onchange="getSelectedID()" class="form-control">
                                                                    @foreach($brand->models as $model)
                                                                        <option value="{{$model->id}}">{{ $model->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        @endforeach
                                                        <div id="car_model">
                                                            <label>Car model</label>
                                                            <select class="form-control" name="model" id="model" onchange="getSelectedID()">
                                                                <option value="{{$car->model->id}}">{{$car->model->name}}</option>
                                                                @foreach($car->brand->models as $car_model)
                                                                    <option value="{{$car_model->id}}">{{$car_model->name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Plate number</label>
                                                        <input class="form-control" type="text" id="plate_number" name="plate_number" value="{{$car->plate_number}}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Car color</label>
                                                        <input style="float: right" type="color" id="color" name="color" value="{{$car->color}}">
                                                    </div>
                                                    <input type="hidden" name="selected" id="selectedID" value="{{$car->model->id}}">
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <button type="submit" onclick="getCarID({{$car->id}})" class="btn btn-info">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal fade" id="location" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <form class="form-horizontal" action="{{ route('update-car-location', $car->location->id) }}" enctype="multipart/form-data" method="POST">
                                                @csrf
                                                <div class="modal-body">
                                                    <input type="hidden" name="location_id" id="location_id" value="" />
                                                    <input type="hidden" id="customer" value="{{$guest->id}}" />
                                                    <div class="form-group">
                                                        <label>Area name</label>
                                                        <input type="text" value="{{$car->location->area}}" name="area" id="area" class="form-control"/>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Street name</label>
                                                        <input type="text" value="{{$car->location->street_name}}" name="street_name" id="street_name" class="form-control"/>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Compound name</label>
                                                        <input class="form-control" type="text" id="compound_name" name="compound_name" value="{{$car->location->compound_name}}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Near building name</label>
                                                        <input class="form-control" type="text" id="near_building_name" name="near_building_name" value="{{$car->location->near_building_name}}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Latitude</label>
                                                        <input class="form-control" type="text" id="latitude" name="latitude" value="{{$car->location->latitude}}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Longitude</label>
                                                        <input class="form-control" type="text" id="longitude" name="longitude" value="{{$car->location->longitude}}">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <button type="submit" onclick="getLocationID({{$car->location->id}})" class="btn btn-info">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                        @else
                            <div class="card card-body blur shadow-blur mt-2 overflow-hidden">
                                <i class="far fa-frown text-center fs-2"></i>
                                <h5 class="text-center"> This guest is not subscribed yet ! </h5>
                            </div>
                        @endif
                    </div>
    </section>
@endsection

<script type="text/javascript">

    function getUserID(id) {
        document.getElementById('user_id').value = id;
    }

    function getCustomerID(id) {
        document.getElementById('customer_id').value = id;
    }

    function getID(id) {
        document.getElementById('id').value = id;
    }

    function getCarID(id) {
        document.getElementById('car_id').value = id;
    }

    function getLocationID(id) {
        document.getElementById('location_id').value = id;
    }

    function getDateID(date) {
        console.log(date.date);
        const myDate = new Date(date.date);
        document.getElementById('date_id').value = date.id;
        document.getElementById('date').value = myDate;
    }

    function getModels(){
        $(document).on('change', '#brand' ,function(){
            $(".some").hide();
            $(".label").hide();
            $(".car_model").show();
            var some = $(this).find('option:selected').val();
            console.log(some)
            $("#some_" + some).show();
            $("#label" ).show();
            $("#car_model" ).hide();
        });
    }
    function getSelectedID() {
        $(document).on('change', '#model' ,function(){
            console.log($(this).val());
            document.getElementById('selectedID').value = $(this).val();
        })
    }
</script>