@extends('layouts.dashboard-template')
 @section('page-content')
 <div class="main-content">

     <div class="page-content">
         <div class="container-fluid">

             <!-- start page title -->
             <div class="row">
                 <div class="col-12">
                     <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                         <h4 class="mb-sm-0">Commission Settings</h4>

                         <div class="page-title-right">
                             <ol class="breadcrumb m-0">

                                 <li class="breadcrumb-item active">Commission Settings</li>
                             </ol>
                         </div>

                     </div>
                 </div>
             </div>
             <!-- end page title -->


             <div class="row justify-content-center">
                 <div class="col-lg-8">
                     <div class="card">
                         <div class="card-body">
                             <div class="d-flex align-items-center mb-4">
                                 <div class="flex-grow-1">
                                     <h5 class="card-title mb-0">Commission Settings</h5>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col-xl-12">
                                     <div class="mb-3">
                                         <label for="cleave-date" class="form-label">Commission For</label>
                                         <select class="form-control">
                                             <option>Vendor</option>
                                             <option>Salesman</option>

                                         </select>
                                     </div>

                                 </div><!-- end col -->

                                 <div class="col-xl-12">
                                     <div class="mb-3">
                                         <label for="cleave-date-format" class="form-label">Commission Mode</label>
                                         <select class="form-control">
                                             <option>Fixed</option>
                                             <option>Percent</option>
                                         </select>
                                     </div>
                                 </div><!-- end col -->
                                 <div class="col-xl-12">
                                     <div class="mb-3">
                                         <label for="cleave-date" class="form-label">Commission Fixed</label>
                                         <input type="text" class="form-control" id="cleave-ccard">
                                     </div>

                                 </div><!-- end col -->
                                 <div class="col-xl-12">
                                     <div class="mb-3">
                                         <label for="cleave-date" class="form-label">Tax</label>
                                         <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                             <input class="form-check-input" type="checkbox" value="" id="auth-remember-check">
                                         </div>
                                     </div>

                                 </div><!-- end col -->
                                 <div class="col-xl-12 text-center">
                                     <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                         <button type="button" class="btn btn-primary bg-gradient waves-effect waves-light">SAVE</button>

                                     </div>

                                 </div><!-- end col -->
                             </div>
                         </div>
                     </div>
                 </div>
                 <!--end card-->
             </div>
             <!--end col-->
         </div>
         <!--end row-->

         <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered modal-lg">
                 <div class="modal-content">
                     <div class="modal-header p-3">
                         <h5 class="modal-title text-uppercase" id="exampleModalLabel">Verify your Account
                         </h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <form action="#" class="checkout-tab">
                         <div class="modal-body p-0">
                             <div class="step-arrow-nav">
                                 <ul class="nav nav-pills nav-justified custom-nav" role="tablist">
                                     <li class="nav-item" role="presentation">
                                         <button class="nav-link p-3 active" id="pills-bill-info-tab" data-bs-toggle="pill" data-bs-target="#pills-bill-info" type="button" role="tab" aria-controls="pills-bill-info" aria-selected="true" data-position="0">Personal Info</button>
                                     </li>
                                     <li class="nav-item" role="presentation">
                                         <button class="nav-link p-3" id="pills-bill-address-tab" data-bs-toggle="pill" data-bs-target="#pills-bill-address" type="button" role="tab" aria-controls="pills-bill-address" aria-selected="false" data-position="1">Bank Details</button>
                                     </li>
                                     <li class="nav-item" role="presentation">
                                         <button class="nav-link p-3" id="pills-payment-tab" data-bs-toggle="pill" data-bs-target="#pills-payment" type="button" role="tab" aria-controls="pills-payment" aria-selected="false" data-position="2">Document Verification</button>
                                     </li>
                                     <li class="nav-item" role="presentation">
                                         <button class="nav-link p-3" id="pills-finish-tab" data-bs-toggle="pill" data-bs-target="#pills-finish" type="button" role="tab" aria-controls="pills-finish" aria-selected="false" data-position="3">Verified</button>
                                     </li>
                                 </ul>
                             </div>
                         </div>
                         <!--end modal-body-->
                         <div class="modal-body">
                             <div class="tab-content">
                                 <div class="tab-pane fade show active" id="pills-bill-info" role="tabpanel" aria-labelledby="pills-bill-info-tab">
                                     <div class="row g-3">
                                         <div class="col-lg-6">
                                             <div>
                                                 <label for="firstName" class="form-label">First Name</label>
                                                 <input type="text" class="form-control" id="firstName" placeholder="Enter your firstname">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-6">
                                             <div>
                                                 <label for="lastName" class="form-label">Last Name</label>
                                                 <input type="text" class="form-control" id="lastName" placeholder="Enter your lastname">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-6">
                                             <div>
                                                 <label for="phoneNumber" class="form-label">Phone</label>
                                                 <input type="text" class="form-control" id="phoneNumber" placeholder="Enter your phone number">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-6">
                                             <div>
                                                 <label for="dateofBirth" class="form-label">Date of
                                                     Birth</label>
                                                 <input type="text" class="form-control" id="dateofBirth" data-provider="flatpickr" placeholder="Enter your date of birth">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-4">
                                             <div>
                                                 <label for="emailID" class="form-label">Email ID</label>
                                                 <input type="email" class="form-control" id="emailID" placeholder="Enter your date of birth">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-4">
                                             <div>
                                                 <label for="password" class="form-label">Password</label>
                                                 <input type="password" class="form-control" id="password" placeholder="Enter your password">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-4">
                                             <div>
                                                 <label for="confirmPassword" class="form-label">Confirm
                                                     Password</label>
                                                 <input type="password" class="form-control" id="confirmPassword" placeholder="Enter your confirm password">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-6">
                                             <div>
                                                 <label for="vatNo" class="form-label">VAT/TIN No.</label>
                                                 <input type="text" class="form-control" id="vatNo" placeholder="Enter your VAT/TIN no">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-6">
                                             <div>
                                                 <label for="serviceTax" class="form-label">Service Tax
                                                     No.</label>
                                                 <input type="text" class="form-control" id="serviceTax" placeholder="Enter your service tax no">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-12">
                                             <div>
                                                 <label for="country-select" class="form-label">Country</label>
                                                 <select class="form-control" data-choices="" name="country-select" id="country-select">
                                                     <option value="">Select country</option>
                                                     <option value="Argentina">Argentina</option>
                                                     <option value="Belgium">Belgium</option>
                                                     <option value="Brazil">Brazil</option>
                                                     <option value="Colombia">Colombia</option>
                                                     <option value="Denmark">Denmark</option>
                                                     <option value="France">France</option>
                                                     <option value="Germany">Germany</option>
                                                     <option value="Mexico">Mexico</option>
                                                     <option value="Russia">Russia</option>
                                                     <option value="Spain">Spain</option>
                                                     <option value="Syria">Syria</option>
                                                     <option value="United Kingdom">United Kingdom</option>
                                                     <option value="United States of America">United States
                                                         of America</option>
                                                 </select>
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-12">
                                             <div class="d-flex align-items-start gap-3 mt-3">
                                                 <button type="button" class="btn btn-primary btn-label right ms-auto nexttab" data-nexttab="pills-bill-address-tab"><i class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>
                                                     Next Step</button>
                                             </div>
                                         </div>
                                         <!--end col-->
                                     </div>
                                     <!--end row-->
                                 </div>
                                 <!-- end tab pane -->

                                 <div class="tab-pane fade" id="pills-bill-address" role="tabpanel" aria-labelledby="pills-bill-address-tab">
                                     <div class="row">
                                         <div class="col-lg-6">
                                             <div class="mb-3">
                                                 <label for="banknameInput" class="form-label">Bank
                                                     Name</label>
                                                 <input type="text" class="form-control" id="banknameInput" placeholder="Enter your bank name">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-6">
                                             <div class="mb-3">
                                                 <label for="branchInput" class="form-label">Branch</label>
                                                 <input type="text" class="form-control" id="branchInput" placeholder="Branch">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-12">
                                             <div class="mb-3">
                                                 <label for="accountnameInput" class="form-label">Account
                                                     Holder Name</label>
                                                 <input type="text" class="form-control" id="accountnameInput" placeholder="Enter account holder name">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-6">
                                             <div class="mb-3">
                                                 <label for="accountnumberInput" class="form-label">Account
                                                     Number</label>
                                                 <input type="number" class="form-control" id="accountnumberInput" placeholder="Enter account number">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-6">
                                             <div class="mb-3">
                                                 <label for="ifscInput" class="form-label">IFSC</label>
                                                 <input type="number" class="form-control" id="ifscInput" placeholder="IFSC">
                                             </div>
                                         </div>
                                         <!--end col-->
                                         <div class="col-lg-12">
                                             <div class="hstack align-items-start gap-3 mt-4">
                                                 <button type="button" class="btn btn-light btn-label previestab" data-previous="pills-bill-info-tab"><i class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>Back
                                                     to Personal Info</button>
                                                 <button type="button" class="btn btn-primary btn-label right ms-auto nexttab" data-nexttab="pills-payment-tab"><i class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>Next
                                                     Step</button>
                                             </div>
                                         </div>
                                         <!--end col-->
                                     </div>
                                 </div>
                                 <!-- end tab pane -->

                                 <div class="tab-pane fade" id="pills-payment" role="tabpanel" aria-labelledby="pills-payment-tab">
                                     <h5 class="mb-3">Choose Document Type</h5>

                                     <div class="d-flex gap-2">
                                         <div>
                                             <input type="radio" class="btn-check" id="passport" checked="" name="choose-document">
                                             <label class="btn btn-outline-info" for="passport">Passport</label>
                                         </div>
                                         <div>
                                             <input type="radio" class="btn-check" id="aadhar-card" name="choose-document">
                                             <label class="btn btn-outline-info" for="aadhar-card">Aadhar
                                                 Card</label>
                                         </div>
                                         <div>
                                             <input type="radio" class="btn-check" id="pan-card" name="choose-document">
                                             <label class="btn btn-outline-info" for="pan-card">Pan
                                                 Card</label>
                                         </div>
                                         <div>
                                             <input type="radio" class="btn-check" id="other" name="choose-document">
                                             <label class="btn btn-outline-info" for="other">Other</label>
                                         </div>
                                     </div>

                                     <div class="dropzone d-flex align-items-center dz-clickable">

                                         <div class="dz-message needsclick text-center">
                                             <div class="mb-3">
                                                 <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                                             </div>

                                             <h4>Drop files here or click to upload.</h4>
                                         </div>
                                     </div>

                                     <ul class="list-unstyled mb-0" id="dropzone-preview">

                                     </ul>
                                     <!-- end dropzon-preview -->
                                     <div class="d-flex align-items-start gap-3 mt-4">
                                         <button type="button" class="btn btn-light btn-label previestab" data-previous="pills-bill-address-tab"><i class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>Back
                                             to Bank Details</button>
                                         <button type="button" class="btn btn-primary btn-label right ms-auto nexttab" data-nexttab="pills-finish-tab"><i class="ri-save-line label-icon align-middle fs-16 ms-2"></i>Submit</button>
                                     </div>
                                 </div>
                                 <!-- end tab pane -->

                                 <div class="tab-pane fade" id="pills-finish" role="tabpanel" aria-labelledby="pills-finish-tab">
                                     <div class="row text-center justify-content-center py-4">
                                         <div class="col-lg-11">
                                             <div class="mb-4">
                                                 <lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon>
                                             </div>
                                             <h5>Verification Completed</h5>
                                             <p class="text-muted mb-4">To stay verified, don't remove the
                                                 meta tag form your site's home page. To avoid losing
                                                 verification, you may want to add multiple methods form the
                                                 <span class="fw-medium">Crypto &gt; KYC Application.</span>
                                             </p>

                                             <div class="hstack justify-content-center gap-2">
                                                 <button type="button" class="btn btn-ghost-success" data-bs-dismiss="modal">Done <i class="ri-thumb-up-fill align-bottom me-1"></i></button>
                                                 <button type="button" class="btn btn-primary"><i class="ri-home-4-line align-bottom ms-1"></i> Back
                                                     to Home</button>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <!-- end tab pane -->
                             </div>
                             <!-- end tab content -->
                         </div>
                         <!--end modal-body-->
                     </form>
                 </div>
             </div>
         </div>
         <!--end modal-->

     </div>
     <!-- container-fluid -->
 </div>
 <!-- End Page-content -->
 @endsection