@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">

    <div id="login_success">
        @if(session()->has('success'))
        <div class="alert alert-success" role="alert">
            {{ session()->get('success') }}
        </div>
        @endif
    </div>

        <div class="row">
            <div class="col-xl-12">
                <h6 class="text-muted">User Detail</h6>
                <div class="nav-align-top mb-4">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                    <button
                        type="button"
                        class="nav-link active"
                        role="tab"
                        data-bs-toggle="tab"
                        data-bs-target="#navs-justified-home"
                        aria-controls="navs-justified-home"
                        aria-selected="true"
                    >
                        <i class="tf-icons bx bx-home"></i> Profile
                    </button>
                    </li>
                    <li class="nav-item">
                    <button
                        type="button"
                        class="nav-link"
                        role="tab"
                        data-bs-toggle="tab"
                        data-bs-target="#navs-justified-profile"
                        aria-controls="navs-justified-profile"
                        aria-selected="false"
                    >
                        <i class="tf-icons bx bx-user"></i> Address
                    </button>
                    </li>
                    <li class="nav-item">
                    <button
                        type="button"
                        class="nav-link order"
                        role="tab"
                        data-bs-toggle="tab"
                        data-bs-target="#navs-justified-messages"
                        aria-controls="navs-justified-messages"
                        aria-selected="false"

                        id="{{ $data->id }}"
                    >
                        <i class="tf-icons bx bx-message-square"></i> Orders
                    </button>
                    </li>
                    <li class="nav-item">
                    <button
                        type="button"
                        class="nav-link"
                        role="tab"
                        data-bs-toggle="tab"
                        data-bs-target="#navs-justified-card-profile"
                        aria-controls="navs-justified-card-profile"
                        aria-selected="false"
                    >
                        <i class="tf-icons bx bx-user"></i> Card Profiles
                    </button>
                    </li>
                </ul>
                <div class="tab-content">
                                        <div class="tab-pane fade show active" id="navs-justified-home" role="tabpanel">
                        <div class="row">
                            <div class="col-md-3">
                                <img src="{{ asset('images/user_image.png') }}" width="100%" class="d-block rounded"/>
                            </div>
                            <div class="col-md-6">
                                <span><b> Name :</b>&nbsp;&nbsp; {{$data['full_name']}} </span><br/><br/>
                                <span><b> Email :</b>&nbsp;&nbsp; {{$data['email']}}</span><br/><br/>
                                <span><b> Contact No :</b>&nbsp;&nbsp;  -     </span><br/><br/>
                                <span><b> QR Code :</b>&nbsp;&nbsp; <img src="{{asset($data->qr_code)}}" style="max-width: 80px;" /> </span><br/><br/>
                                <span><b> Create At :</b>&nbsp;&nbsp; {{$data->created_at}} </span><br/><br/>
                                <span><b> Update At :</b>&nbsp;&nbsp; {{$data->updated_at}}</span><br/><br/>
                                <span><b> Change Status :</b>
                                        <input type="hidden" name="tempstatus" id="tempstatus" value="{{$data->id}}" />
                                            <select id="changeStatus" class="form-select">
                                            <option value=""> -- Select -- </option>
                                            <option @if($data->status == 'Active') selected  @endif
                                                    value="Active"> Active</option>
                                            <option @if($data->status == 'Inactive') selected  @endif
                                                    value="Inactive"> Inactive</option>
                                            </select>
                                </span><br/><br/>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="navs-justified-profile" role="tabpanel">
                        No Address Found                    </div>

                    <div class="tab-pane fade" id="navs-justified-messages" role="tabpanel">
                       No results found!!                    </div>
                    <div class="tab-pane fade" id="navs-justified-card-profile" role="tabpanel">
                        @if (!empty($profiles))
                            <div class="table-responsive text-nowrap">
                                <table class="table table-bordered display">
                                <thead>
                                    <tr>
                                    <th>Sr No.</th>
                                    <th>User Name</th>
                                    <th>Card Profile Name</th>
                                    <th>Qr Code</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    </tr>
                                </thead>
                                    <tbody>
                                                                            </tbody>
                                </table>
                            </div>
                        @else
                            <p>Profiles Not Found</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">
    $(document).ready(function() {
        $('.table.display').DataTable();
    });

    var currentRequest = null;
    $("#changeStatus").change(function(){
        var uid = $('#tempstatus').val();
        var status = $("#changeStatus").val();
        $.ajax({
            url : "{{ route('change_status') }}",
            type: "POST",
            data : {status:status, id: uid, "_token": "{{ csrf_token() }}"},
            beforeSend : function(){
                if(currentRequest != null){
                currentRequest.abort();
                }
            },
            success:function(data){
                $("#login_success").html('');
                $("#login_error").html('');
                if(data.status == '1'){
                    $('#login_success').html('<div class="alert alert-success" role="alert">User status changed successfully.</div>');
                }
                setTimeout(() => {
                    window.location.href="{{ route('users.index') }}";
                }, 1000);
            }
        });
    });
</script>
@endsection