@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">
                        <div class="avatar avatar-xl position-relative">
                            @if($customer->avatar)
                                <img src="{{$customer->avatar}}" alt="profile_image" class="w-100 border-radius-lg shadow-sm">
                            @else
                                <img src="/uploads/users/avatar.jpg" alt="profile_image" class="w-100 border-radius-lg shadow-sm">
                            @endif
                        </div>
                    </div>
                    <div class="col-auto my-auto">
                        <div class="">
                            <h5 class="mb-1">
                                {{ $customer->name }}
                            </h5>
                            <p class="mb-0 font-weight-bold text-sm">
                                <b>Email:</b> {{ $customer->email }}
                            </p>
                            <p class="mb-0 font-weight-bold text-sm">
                                <b>Phone Number:</b> {{ $customer->phone }}
                            </p>
                            @if($customer->created_at)
                            <p class="mb-0 font-weight-bold text-sm">
                                <b>Account Created At:</b> {{ $customer->created_at->format('d-m-Y') }}
                            </p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    @if($fcm_setting)
                    <div class="col-3">
                        <button style="width: 100%" type="button" class="btn btn-sm bg-gradient-info" data-toggle="modal"  data-target="#notification">Send Notification</button>
                    </div>
                    @endif
                    @if($sms_setting)
                    <div class="col-3">
                        <button style="width: 100%" type="button" class="btn btn-sm bg-gradient-info" data-toggle="modal"  data-target="#sms">Send SMS</button>
                    </div>
                    @endif
                    @if($mail_setting)
                    <div class="col-3">
                        <button style="width: 100%" type="button" class="btn btn-sm bg-gradient-info" data-toggle="modal"   data-target="#email">Send Email</button>
                    </div>
                    @endif
                    <div class="col-3">
                        <form action="{{route('reset_password')}}" method="POST">
                            @csrf
                            <input type="hidden" value="{{$customer->id}}" name="customer">
                            <button style="width: 100%" type="submit" class="btn btn-sm bg-gradient-danger">Reset Password</button>
                        </form>
                        @if(Session::has('password'))
                        <input class="form-control" type="text" readonly value="{{Session::get('password')}}" />
                        @endif
                    </div>

                    <div class="col-3">
                        <div class="form-group">
                            <label>Cash Payment</label>
                            <div class="form-check form-switch h6" style="float: right">
                                <input type="checkbox" class="form-check-input" onchange="updateTypeActivation(this, {{ $customer->id }})" name="cash_payment_flag" id="cash_payment_flag" {{ ($customer->cash_payment_flag) == 1 ? 'checked' : '' }}>
                                <label class="form-check-label" for="cash_payment_flag"></label>
                            </div>
                        </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({{$customer->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({{$customer->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({{$customer->id}})" class="btn btn-info">Send Email</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @if(count($subscriptions) > 0)
        @foreach($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>Address: {{$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>Address: {{$car->location->area}},{{$car->location->street_name}},{{$car->location->compound_name}}</li>
                            @elseif($car->location->compound_name==null && $car->location->near_building_name)
                             <li>Address: {{$car->location->area}},{{$car->location->street_name}},{{$car->location->near_building_name}}</li>
                            @else
                            <li>Address: {{$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>
                            <li>Car location:
                                <a href="https://www.google.com/maps/search/?api=1&query={{$car->location->latitude}},{{$car->location->longitude}}" target="_blank">
                                    <i class="fas fa-map-marker-alt"></i> <small>Open maps</small>
                                </a>
                            </li>
                            <!-- Button trigger modal -->
                            <li>
                                Car Image:
                                <a href="" type="button" data-toggle="modal" data-target="#exampleModal">
                                    <i class="fas fa-image"></i> <small>Open image</small>
                                </a>
                            </li>

                            <!-- Modal -->
                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Car image</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <img src="{{$car->image}}" alt="profile_image" class="w-100 border-radius-lg shadow-sm" height="600px;">
                                        </div>
                                        <div class="modal-footer">
                                            <a class="btn btn-sm btn-info w-100" href="{{$car->image}}" download> Download <i class="fas fa-download fs-15"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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="{{$customer->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="{{$customer->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
                    <hr class="horizontal dark my-3">
                    <div class="col-10">
                        @php
                            $dates = \App\Models\SubscriptionDate::where('subscription_id', $subscription->id)->get();
                        @endphp
                        <h6><i class="fas fa-calendar"></i> Wash history:</h6>
                        @foreach($dates as $date)
                            @if($date->date <= date('Y-m-d'))
                                <span class="badge badge-sm bg-info mb-2" style="margin-right: 2px; margin-left: 5px"> {{date('d-m-Y', strtotime($date->date))}} </span>
                            @endif
                        @endforeach
                    <hr class="horizontal dark my-3">
                    <div class="col-10">
                        @php
                            $dates = \App\Models\SubscriptionDate::where('subscription_id', $subscription->id)->get();
                        @endphp
                        <h6><i class="fas fa-calendar"></i> Upcoming washes:</h6>
                        @foreach($dates as $date)
                            @if($date->date > date('Y-m-d'))
                            <a style="cursor: pointer" class="badge badge-sm bg-info mb-2" data-toggle="modal" data-target="#date" style="margin-right: 2px; margin-left: 5px" onclick="getDateID({{$date}})" title="change wash date"> {{date('d-m-Y', strtotime($date->date))}} </a>
                                <div class="modal fade" id="date" 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-wash-date') }}" enctype="multipart/form-data" method="POST">
                                                @csrf
                                                <div class="modal-body">
                                                    <h6>Change wash date</h6>
                                                    <input type="hidden" name="date_id" id="date_id" value="" />
                                                    <input type="hidden" id="customer" value="{{$customer->id}}" />
                                                    <div class="form-group">
                                                        <label>Select a new date</label>
                                                        <input type="date" value="" name="date" id="date" class="form-control"/>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-info">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                        <hr class="horizontal dark my-3">
                    </div>
                </div>
            </div>
            @php
            $invoices = \App\Models\Payment::where('subscription_id', $subscription->id)->get();
            @endphp
            @if(count($invoices))
                <div class="card">
                    <div class="card-body pt-0 p-3 row">
                        <div class="col-12">
                            <h6> <i class="fas fa-wallet"></i> Payment History</h6>
                            <table class="table text-center">
                                <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Package</th>
                                    <th class="text-center">Package Price</th>
                                    <th class="text-center">Discount</th>
                                    <th class="text-center">Paid Amount</th>
                                    <th class="text-center">Payment Type</th>
                                    <th class="text-center">Subs.type</th>
                                    <th class="text-center">Total</th>
                                </tr>
                                </thead>
                                @foreach($invoices as $invoice)
                                    <tbody>
                                    <tr>
                                        <td class="text-center"><a href="{{route('sales.details', $invoice->id)}}" title="view details">{{ $invoice->transaction_code }}</a></td>
                                        <td class="text-center">{{ $invoice->subscription->package->name }}</td>
                                        <td class="text-center">{{ $invoice->subscription->package->monthly_price }} <small>QAR</small></td>
                                        @if($invoice->coupon_id)
                                            @if($invoice->coupon->type == 'percent')
                                                <td class="text-center">{{ $invoice->coupon->amount }} <small>%</small></td>
                                            @else
                                                <td class="text-center">{{ $invoice->coupon->amount }} <small>QAR</small></td>
                                            @endif
                                        @else
                                            <td class="text-center">N/A</td>
                                        @endif
                                        <td class="text-center">{{ $invoice->amount }} <small>QAR</small></td>
                                        <td class="text-center">{{ $invoice->payment_method_type }}</td>
                                        <td class="text-center">{{ $invoice->type }}</td>
                                        <td class="text-center">{{ $invoice->amount }} <small>QAR</small></td>
                                    </tr>
                                    </tbody>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
            @endif
        </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 Customer is not subscribed yet ! </h5>
        </div>
        @endif
    </div>
    </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();
        })
    }

    function updateTypeActivation(el, id){
        if($(el).is(':checked')){
            var status = 1;
        } else {
            var status = 0;
        }

        $.post('{{ route('update-status') }}', {_token:'{{ csrf_token() }}', id:id, status:status}, function(data){
            if(data == 1){
                $.notify('Status updated successfully', 'success');
                setTimeout(function(){
                    window.location.reload(1);
                }, 5000);
            }
            else{
                $.notify('Something went wrong', 'danger');
            }
        });
    }
</script>