@extends('layouts.app')

@section('content')


<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->

      @include('users.includes.sidebar')
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

        @include('users.includes.header')

        <!-- / Navbar -->

        <!-- Content wrapper -->
        <div class="content-wrapper">
            <!-- Content -->

            <div class="container-xxl flex-grow-1 container-p-y">

              

              <div class="row">
                <div class="col-xl-12">
                  {{-- <h6 class="text-muted">Filled Pills</h6> --}}
                  <div class="nav-align-top mb-4">
                    <ul class="nav nav-pills mb-3 nav-fill" role="tablist">
                      <li class="nav-item">
                        <button
                          type="button"
                          class="nav-link active"
                          role="tab"
                          data-bs-toggle="tab"
                          data-bs-target="#navs-pills-justified-profile"
                          aria-controls="navs-pills-justified-profile"
                          aria-selected="true"
                        >
                          <i class="tf-icons bx bx-user"></i> Profile
                          {{-- <span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-danger">3</span> --}}
                        </button>
                      </li>
                      <li class="nav-item">
                        <button
                          type="button"
                          class="nav-link"
                          role="tab"
                          data-bs-toggle="tab"
                          data-bs-target="#navs-pills-justified-password"
                          aria-controls="navs-pills-justified-password"
                          aria-selected="false"
                        >
                          <i class="tf-icons bx bx-key"></i> Change Password
                        </button>
                      </li>
                      <li class="nav-item">
                        <button
                          type="button"
                          class="nav-link"
                          role="tab"
                          data-bs-toggle="tab"
                          data-bs-target="#navs-pills-justified-messages"
                          aria-controls="navs-pills-justified-messages"
                          aria-selected="false"
                        >
                          <i class="tf-icons bx bx-message-square"></i> Messages
                        </button>
                      </li>
                    </ul>
                    <div class="tab-content">
                      <div class="tab-pane fade show active" id="navs-pills-justified-profile" role="tabpanel">
                        {{-- <div class="card mb-4"> --}}
                          <h5 class="card-header">Profile Details</h5>
                          @if ($user->is_agent == 0)
                            <button
                                id="levelform"
                                type="button"
                                class="btn btn-secondary me-2"
                                data-bs-toggle="modal"
                                data-bs-target="#backDropModal"
                              >
                              Upgrade to Agent/School
                            </button><br/><br/>
                          @elseif ($user->is_agent == 1)
                            Account Upgrade in review
                          @elseif ($user->is_agent == 2)
                            Agent/School Account
                          @endif
                          
                          <hr class="my-0" />
                          <div class="card-body">
                            <form id="formAccountSettings" method="POST" action="{{url('user/profile-update')}}">
                              @csrf
                              <div class="row">
                                <div class="mb-3 col-md-6">
                                  <label for="firstName" class="form-label">First Name</label>
                                  <input
                                    class="form-control"
                                    type="text"
                                    id="firstName"
                                    name="firstName"
                                    value="{{$user->first_name}}"
                                    autofocus
                                  />
                                </div>
                                <div class="mb-3 col-md-6">
                                  <label for="lastName" class="form-label">Last Name</label>
                                  <input class="form-control" type="text" name="lastName" id="lastName" value="{{$user->last_name}}" />
                                </div>
                                <div class="mb-3 col-md-6">
                                  <label for="email" class="form-label">E-mail</label>
                                  <input
                                    class="form-control"
                                    type="text"
                                    id="email"
                                    name="email"
                                    readonly
                                    value="{{$user->email}}"
                                    placeholder="john.doe@example.com"
                                  />
                                </div>
                                
                                <div class="mb-3 col-md-6">
                                  <label class="form-label" for="phoneNumber">Phone Number</label>
                                  <div class="input-group input-group-merge">
                                    {{-- <span class="input-group-text">US (+1)</span> --}}
                                    <input
                                      type="text"
                                      id="phoneNumber"
                                      name="phoneNumber"
                                      value="{{$user->phone_number}}"
                                      class="form-control"
                                      placeholder="+234....."
                                    />
                                  </div>
                                </div>
                                {{-- <div class="mb-3 col-md-6">
                                  <label for="address" class="form-label">Address</label>
                                  <input type="text" class="form-control" id="address" name="address" placeholder="Address" />
                                </div>
                                <div class="mb-3 col-md-6">
                                  <label for="state" class="form-label">State</label>
                                  <input class="form-control" type="text" id="state" name="state" placeholder="California" />
                                </div>
                                <div class="mb-3 col-md-6">
                                  <label for="zipCode" class="form-label">Zip Code</label>
                                  <input
                                    type="text"
                                    class="form-control"
                                    id="zipCode"
                                    name="zipCode"
                                    placeholder="231465"
                                    maxlength="6"
                                  />
                                </div> --}}
                                <div class="mb-3 col-md-6">
                                  <label class="form-label" for="country">Country</label>
                                  <div>
                                    <select id="country" class="select2 form-select" name="country" disabled>
                                      <option value="">Select</option>
                                      @if (isset($country))
                                        @foreach ($country as $data)
                                          <option value="{{$data->country}}"  {{($user->country == $data->country) ? 'selected' : ''}}>{{$data->country}}</option>
                                        @endforeach
                                      @endif
                                    </select>
                                  </div>
                                </div>
                              <div class="mb-3 col-md-6">
                                <label class="form-label" for="country">Level</label>
                                <div>
                                  <select class="select2 form-select" name="level">
                                    <option value="">Select</option>
                                    @if (isset($level))
                                      @foreach ($level as $data)
                                        <option value="{{$data->id}}"  {{($user->level_id == $data->id) ? 'selected' : ''}}>{{$user->level->name}}</option>
                                      @endforeach
                                    @endif
                                  </select>
                                </div>
                              </div>
                              <div class="mt-2">
                                <button type="submit" class="btn btn-primary me-2">Save changes</button>
                              </div>
                            </form>
                          </div>
                          <!-- /Account -->
                        {{-- </div> --}}
                      </div></div>

                      <div class="tab-pane fade" id="navs-pills-justified-password" role="tabpanel">
                        <h5 class="card-header">Profile Details</h5>
                        <!-- Account -->
                        
                        <hr class="my-0" />
                        <div class="card-body">
                          <form id="" method="POST" action="{{url('user/change-password')}}">
                            @csrf
                            <div class="row">
                              <div class="mb-3 col-md-12">
                                <label for="current_pwd" class="form-label">Current Password</label>
                                <input
                                  class="form-control"
                                  type="password"
                                  id="current_pwd"
                                  name="current_password"
                                  required
                                  autofocus
                                />
                              </div>
                              <div class="mb-3 col-md-12">
                                <label for="password" class="form-label">New Password</label>
                                <input
                                  class="form-control"
                                  type="password"
                                  id="password"
                                  required
                                  name="password"
                                />
                              </div>
                              <div class="mb-3 col-md-12">
                                <label for="conf_pwd" class="form-label">Retype New Password</label>
                                <input
                                  class="form-control"
                                  type="password"
                                  id="conf_pwd"
                                  required
                                  name="confirm_password"
                                />
                              </div>
                              
                            <div class="mt-2">
                              <button type="submit" class="btn btn-primary me-2">Save changes</button>
                            </div>
                          </form>
                        </div>
                      </div></div>

                      <div class="tab-pane fade" id="navs-pills-justified-messages" role="tabpanel">
                        <p>
                          Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies
                          cupcake gummi bears cake chocolate.
                        </p>
                        <p class="mb-0">
                          Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet
                          roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly
                          jelly-o tart brownie jelly.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- / Content -->

            <!-- Footer -->
            @include('users.includes.footer')
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
          </div>
        <!-- Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
</div>

<!-- Modal Backdrop -->
<div class="col-lg-4 col-md-3">
  {{-- <small class="text-light fw-semibold">Backdrop</small> --}}
  <div class="mt-3">
    

    <!-- Modal -->
    <div class="modal fade" id="backDropModal" data-bs-backdrop="static" tabindex="-1">
      <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{url('user/updateaccount')}}">
          @csrf
          <div class="modal-header">
            <h5 class="modal-title" id="backDropModalTitle">Account Upgrade Form <small>(Strictly for Nigerians only for now)</small> </h5>
            
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col mb-3">
                <label for="nameBackdrop" class="form-label">Agent/School Name</label>
                <input type="text" name="agentName" class="form-control" />
                
              </div>
            </div>
            <div class="row">
              <div class="col mb-3">
                <label for="nameBackdrop" class="form-label">Full Address</label>
                <textarea class="form-control" name="address"></textarea>
                
              </div>
            </div>
            <div class="row">
              <div class="col mb-3">
                <label for="nameBackdrop" class="form-label">Purchase Category</label>
                <select class="form-control" name="copiescategories">
                  <option value=""> ~ Select Category ~ </option>
                  <option value="10 - 20"> 10 - 20 copies </option>
                  <option value="21 - 50"> 21 - 50 copies </option>
                  <option value="51 - 100"> 51 - 100 copies </option>
                  <option value="Above 100"> Above 100 copies </option>
                </select>
                
              </div>
            </div>
            <div class="row g-2">
             
            </div>
          </div>
          <div class="modal-footer">
            {{-- <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
              Close
            </button> --}}
            <button type="submit" class="btn btn-primary">Upgrade</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

@endsection