@extends('includes.layout') <!-- Extend the layout -->

@section('content') <!-- Define the content section -->
<div>
  <div class="container rounded bg-white mt-4 mb-5">
    <div class="row">
      <div class="col-md-3 border-end">
        <div class="d-flex flex-column align-items-center text-center p-3 py-5">
          <div class="avatar-upload">
            <div class="avatar-edit">
              <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
              <label for="imageUpload"></label>
            </div>
            <div class="avatar-preview">
              <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);"></div>
            </div>
          </div>
          <span class="font-weight-bold">Edogaru</span>
          <span class="text-black-50">edogaru@mail.com.my</span>
          <span></span>
        </div>
      </div>
      <div class="col-md-5 border-end">
        <div class="p-3 ">
          <h6>Personal Details</h6>
          <div class="row mt-3">
            <div class="col-md-6 mb-3">
              <label class="form-label">Name</label>
              <input type="text" class="form-control" placeholder="enter name" value="">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">Mobile Number</label>
              <input type="text" class="form-control" placeholder="enter phone number" value="">
            </div>
            <div class="col-md-12 mb-3">
              <label class="form-label">Bio </label>
              <textarea type="text" class="form-control" placeholder="enter bio " value=""></textarea>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label"> Gender</label>
              <select class="form-select" aria-label="Default select example">
                <option selected>Select</option>
                <option value="1">Male</option>
                <option value="2">Female</option>
                <option value="3">Other</option>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label"> City</label>
              <select class="form-select" aria-label="Default select example">
                <option selected>Select</option>
                <option value="1">Chandigarh</option>
                <option value="2">Mohali</option>
                <option value="3">Other</option>
              </select>
            </div>
            <div class="col-md-12 mb-3">
              <label class="form-label">Address </label>
              <textarea type="text" class="form-control" placeholder="enter address " value=""></textarea>
            </div>
            <div class="col-md-12 mb-3">
              <label class="form-label">Services</label>
              <div class="mt-2">
                <input type="checkbox" class="btn-check" id="btn1" autocomplete="off">
                <label class="btn btn-outline-theme mb-2" for="btn1">Haircut</label>
                <input type="checkbox" class="btn-check" id="btn2" autocomplete="off">
                <label class="btn btn-outline-theme mb-2" for="btn2">Hair Color</label>
                <input type="checkbox" class="btn-check" id="btn3" autocomplete="off">
                <label class="btn btn-outline-theme mb-2" for="btn3">Hair</label>
              </div>
            </div>
            <div class="mt-5 text-center">
              <button class="btn btn-primary profile-button" type="button">Save Profile</button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-3">
          <h6>Upload Photos</h6>
          <div class="upload__box mt-3">
            <div class="upload__btn-box">
              <label class="upload__btn"> Upload Photos <input type="file" multiple="" data-max_length="20" class="upload__inputfile">
              </label>
            </div>
            <div class="row upload__img-wrap"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row my-4 border-top">
      <div class="col-md-12 mt-4">
        <h6 class="mb-0">Add Services</h6>
      </div>
      <div class="col-md-10">
        <div class="input-group mb-3 mt-3">
          <select class="form-select" aria-label="Default select example">
            <option selected="">Select Service</option>
            <option value="1">Haircut</option>
            <option value="2">Female</option>
            <option value="3">Other</option>
          </select>
          <select class="form-select" aria-label="Default select example">
            <option selected="">Select Sub Services</option>
            <option value="1">Head Shave</option>
            <option value="2">Head Shave 2</option>
            <option value="3">Head Shave 3</option>
          </select>
          <input type="text" placeholder="Enter Price" class="form-control" id="">
          <button class="btn btn-primary rounded-1" type="button" id="button-addon2">Add</button>
        </div>
      </div>
      <div class="col-md-12 mt-4">
        <div class="card">
          <table class="table tx-13  mb-0 table-borded">
            <thead>
              <tr>
                <th scope="col">Sr. No.</th>
                <th scope="col">Service</th>
                <th scope="col">Sub Services</th>
                <th scope="col">Price</th>
                <th scope="col">Edit/Delete</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>--</td>
                <td>--</td>
                <td>--</td>
                <td>--</td>
              </tr>
              <tr>
                <td>2</td>
                <td>--</td>
                <td>--</td>
                <td>--</td>
                <td>--</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection