@extends('admin.layout.master')
@section('content')
@section('client', 'active')
@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<style>
    .iti.iti--allow-dropdown {
        width: 100% !important;
    }
</style>
@endpush
@section('title', 'Details')
<!--start page wrapper -->
<div class="page-wrapper">
  <div class="page-content">
    <!--breadcrumb-->
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
      <div class="breadcrumb-title pe-3">Client Details</div>
      <div class="ps-3">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0 p-0">
            <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Client Details</li>
          </ol>
        </nav>
      </div>
      {{-- <div class="ms-auto">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary">Settings</button>
                    <button type="button"
                        class="btn btn-primary split-bg-primary dropdown-toggle dropdown-toggle-split"
                        data-bs-toggle="dropdown"> <span class="visually-hidden">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-end"> <a class="dropdown-item"
                            href="javascript:;">Action</a>
                        <a class="dropdown-item" href="javascript:;">Another action</a>
                        <a class="dropdown-item" href="javascript:;">Something else here</a>
                        <div class="dropdown-divider"></div> <a class="dropdown-item" href="javascript:;">Separated
                            link</a>
                    </div>
                </div>
            </div> --}}
    </div>
    <!--end breadcrumb-->
    <div class="container">
      <div class="main-body">
        <div class="row">
          <div class="col-lg-4">
            <div class="card">
              <div class="card-body">
                <div class="d-flex flex-column align-items-center text-center">
                    <img src="{{ $client->image }}" alt="Admin"
                      class="rounded-circle p-1 bg-primary" width="110">
                  <div class="mt-3">
                    <h4>
                      @if (!empty($client))
                        {{ $client->full_name }}
                      @endif
                    </h4>
                    <p class="text-secondary mb-1">
                      @if (!empty($client))
                        {{ $client->email }}
                      @endif
                    </p>
                    {{-- <p class="text-muted font-size-sm">@if (!empty($client)) {{$client->country}} @endif</p>
                                        <button class="btn btn-primary">Follow</button>
                                        <button class="btn btn-outline-primary">Message</button> --}}
                  </div>
                </div>
                <hr class="my-4" />
                <ul class="list-group list-group-flush">
                  <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                    <h6 class="mb-0">Country</h6>
                    <span class="text-secondary">
                      @if (!empty($client))
                        {{ $client->country }}
                      @endif
                    </span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                    <h6 class="mb-0">Mobile No</h6>
                    <span class="text-secondary">
                      @if (!empty($client))
                        {{ $client->mobile_no }}
                      @endif
                    </span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                    <h6 class="mb-0">Created at</h6>
                    <span class="text-secondary">
                      @if (!empty($client))
                        {{ $client->created_at }}
                      @endif
                    </span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                    <h6 class="mb-0">Updated at</h6>
                    <span class="text-secondary">
                      @if (!empty($client))
                        {{ $client->updated_at }}
                      @endif
                    </span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                    <h6 class="mb-0">Last Login</h6>
                    <span class="text-secondary"></span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-8">
            <div class="card">
              <form action="{{ route('admin.client.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id"
                  @if (!empty($client)) value="{{ $client->id }}" @endif>
                <div class="card-body">
                  <div class="row mb-3">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Full Name</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      <input type="text" class="form-control"
                        @if (!empty($client)) value="{{ $client->full_name }}" @endif name="full_name" />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Email</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      <input type="text" class="form-control"
                        @if (!empty($client)) value="{{ $client->email }}" @endif name="email" />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Mobile No</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      <input type="tel" class="form-control"
                        @if (!empty($client)) value="{{ $client->mobile_no }}" @endif id="inputPhone" name="mobile_no" />
                        <input type="hidden" name="countryCode" value="{{ $client->countryCode }}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Country</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      <input type="text" class="form-control" readonly
                        @if (!empty($client)) value="{{ $client->country }}" @endif name="country" />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-sm-3">
                      <h6 class="mb-0">Image</h6>
                    </div>
                    <div class="col-sm-9 text-secondary">
                      <input type="file" class="form-control"
                        @if (!empty($client)) value="{{ $client->image }}" @endif name="image" />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-9 text-secondary">
                      <input type="submit" class="btn btn-primary px-4" value="Update" />
                    </div>

                  </div>
              </form>

            </div>
          </div>
          {{-- <div class="row">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="d-flex align-items-center mb-3">Project Status</h5>
                                        <p>Web Design</p>
                                        <div class="progress mb-3" style="height: 5px">
                                            <div class="progress-bar bg-primary" role="progressbar"
                                                style="width: 80%" aria-valuenow="80" aria-valuemin="0"
                                                aria-valuemax="100"></div>
                                        </div>
                                        <p>Website Markup</p>
                                        <div class="progress mb-3" style="height: 5px">
                                            <div class="progress-bar bg-danger" role="progressbar" style="width: 72%"
                                                aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <p>One Page</p>
                                        <div class="progress mb-3" style="height: 5px">
                                            <div class="progress-bar bg-success" role="progressbar"
                                                style="width: 89%" aria-valuenow="89" aria-valuemin="0"
                                                aria-valuemax="100"></div>
                                        </div>
                                        <p>Mobile Template</p>
                                        <div class="progress mb-3" style="height: 5px">
                                            <div class="progress-bar bg-warning" role="progressbar"
                                                style="width: 55%" aria-valuenow="55" aria-valuemin="0"
                                                aria-valuemax="100"></div>
                                        </div>
                                        <p>Backend API</p>
                                        <div class="progress" style="height: 5px">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 66%"
                                                aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!--end page wrapper -->
@endsection
@section('script')
    <script>
        const phoneInputField = document.querySelector("#inputPhone");
        const phoneIntl = window.intlTelInput(phoneInputField, {
            // initialCountry: "auto",
            // geoIpLookup: function(success, failure) {
            //     fetch("https://ipapi.co/json")
            //         .then(function(res) {
            //             return res.json();
            //         })
            //         .then(function(data) {
            //             success(data.country_code);
            //         })
            //         .catch(function() {
            //             failure();
            //         });
            // },
            // hiddenInput: function(telInputName) {
            //     return {
            //         country: "country_code"
            //     };
            // },
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
        });
        var checkPhoneNumber = () => {
            console.log("onchange...")
            var selectedCountry = phoneIntl.getSelectedCountryData();
            $("[name=countryCode]").val(selectedCountry.dialCode);
            console.log("selectedCountry ==> ", selectedCountry)
            $("[name=country]").val(selectedCountry.name);
        }
        phoneInputField.addEventListener("countrychange", checkPhoneNumber);
        $(document).on("change", "#inputPhone", checkPhoneNumber)
        let countries = intlTelInputGlobals.getCountryData();
        @if ($client->country)
            let country = countries.find(x => x.name.search("{{ $client->country }}") >= 0);
            @if ($client->country)
                if (!country) {
                    country = countries.find(x => x.dialCode == "{{ $client->countryCode }}");
                }
            @endif
            console.log("country ==> ", country);
            if (country) {
                console.log("country.iso2 ==> ", country.iso2)
                phoneIntl.setCountry(country.iso2)
            }
        @endif
    </script>
@endsection