@extends('Web/layout')
@section('title','Internal Dispute Solution System')
@section('content')
<div class="pt-3">
    <div class="page-title d-flex">
        <div class="align-self-center">
            <a href="#" data-back-button class="me-3 ms-0 icon icon-xxs bg-theme rounded-s shadow-m">
            <i class="bi bi-chevron-left color-theme font-14"></i>
            </a>
        </div>
        <div class="align-self-center me-auto">
            <h1 class="color-theme mb-0 font-18">Internal Dispute <span class="color-highlight font-14"> Solution System</span></h1>
        </div>
        <div class="align-self-center ms-auto">
        
        </div>
    </div>
</div>
<div class="card card-style">
    <div class="content">
        <p class="font-20 font-800 mt-4" style="margin-bottom:10px;">Dispute With: <span id="dispute_type_name"></span></p>
        <span class="font-16 font-800 text-danger" style="margin-bottom:10px;" id="errorMessage"></span>
        <form action="#" method="post" class="demo-animation needs-validation m-0" novalidate="">
           
                <div class="staff_view">
                    <div class="form-custom form-label form-icon mb-3">
                        <i class="bi bi-person-circle font-14"></i>
                        <input type="text" class="form-control rounded-xs" id="subject" placeholder="Subject">
                        <label for="c1" class="color-theme">Subject <span class="text-red">*</span></label>
                    </div>
                    
                    <div class="form-label form-icon mb-3">
                        <textarea type="text" class="form-control rounded-xs" id="case_in_details" rows="4" placeholder="Case In Details" ></textarea>
                        <label for="c1" class="color-theme">Case In Details</label>
                    </div>
                </div>
            
            

            <button class="btn btn-full bg-blue-dark rounded-xs text-uppercase font-700 w-100 btn-s mt-4" type="buttom" id="saveInternalDisputeData">Save</button>
        </form>
    </div>
</div>
<style>
.select2-container .select2-selection--single {
    height: 40px!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 40px!important;
}
</style>
 <!-- Select2 CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
 <!-- jQuery -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script>
        $('.scheme_name').hide();
        $('.plot_name').hide();
      $("#staff_name").select2({
          placeholder: "Select Staff ",
          allowClear: true,
         
      });
      $("#dispute_reason").select2({
          placeholder: "Select Dispute Reason ",
          allowClear: true
      });
      $("#scheme_name").select2({
          placeholder: "Select Scheme Name ",
          allowClear: true,
          width: '100%'
      });
      $("#associate_name").select2({
          placeholder: "Select Associate Name ",
          allowClear: true,
          width: '100%'
      });
      $("#multiple").select2({
          placeholder: "Select a programming language",
          allowClear: true
      });
    </script>
@endsection