@extends('admin.layout')

@section('title', 'Personal Details')

@section('content')
<div class="container-fluid">

  {{-- Back & Title --}}
  <div class="d-flex align-items-center ">
    <h4><a href="{{route('user_profile')}}"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"
            viewBox="0 0 64 64" fill="none">
            <g filter="url(#filter0_d_114_35554)">
                <rect x="10" y="1" width="44" height="44" rx="10" fill="white" shape-rendering="crispEdges" />
                <path d="M34 18L29 23L34 28" stroke="#292460" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
            </g>
            <defs>
                <filter id="filter0_d_114_35554" x="0" y="0" width="64" height="64" filterUnits="userSpaceOnUse"
                    color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha" />
                    <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_114_35554" />
                    <feOffset dy="9" />
                    <feGaussianBlur stdDeviation="6" />
                    <feComposite in2="hardAlpha" operator="out" />
                    <feColorMatrix type="matrix"
                        values="0 0 0 0 0.399674 0 0 0 0 0.197743 0 0 0 0 0.558333 0 0 0 0.12 0" />
                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_114_35554" />
                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_114_35554" result="shape" />
                </filter>
            </defs>
        </svg> </a>Personal Details</h4>
  </div>

  {{-- User Info --}}
  <div class="mb-4">
    <p class="mb-1"><strong>User ID :</strong> #BU0881</p>
    <p class="mb-0"><strong>User Name :</strong> John</p>
  </div>

  {{-- Card --}}
  <div class="card shadow-sm border-0">
    <div class="card-body">

      <h6 class="fw-bold mb-4">Personal Details</h6>

      <form method="POST" action="#">
        @csrf

        <div class="row g-4">

          {{-- Name --}}
          <div class="col-md-6">
            <label class="form-label">Name <span class="text-danger">*</span></label>
            <input
              type="text"
              class="form-control"
              name="name"
              value="John"
              required
            >
          </div>

          {{-- Phone --}}
          <div class="col-md-6">
            <label class="form-label">Phone Number <span class="text-danger">*</span></label>
            <input
              type="text"
              class="form-control"
              name="phone"
              value="99555 330102"
              required
            >
          </div>

          {{-- Email --}}
          <div class="col-md-12">
            <label class="form-label">Email <span class="text-danger">*</span></label>
            <input
              type="email"
              class="form-control"
              name="email"
              value="john@gmail.com"
              required
            >
          </div>

        </div>

        {{-- Buttons --}}
        <div class="mt-4 d-flex justify-content-center gap-3">
          <button type="submit" class="btn btn-warning px-5">
            Update
          </button>

          <a href="{{ route('user_profile', 1) }}" class="btn btn-secondary px-5">
            Discard
          </a>
        </div>

      </form>

    </div>
  </div>

</div>
@endsection