@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="card1 card-style1">
    <div class="content">
        <p class="font-20 font-800 mt-4" style="margin-bottom:10px;">Dispute With: <span>{{$dispute_type}}</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="">
            <input type="hidden" name="dispute_type" id="dispute_type" value="{{$dispute_type}}"/>
            @if($dispute_type == 'Staff')
                <div class="form-label mb-3">
                    <select id="staff_name" class=" form-control js-choice" onchange="getfirststaff(this);">
                        <option value="">Select Staff Name</option>
                        @if($staff_data)
                            @foreach($staff_data as $key => $value)
                                <option value="{{$value->id}}">{{$value->fullname}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <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="first_party_name" placeholder="Staff Full Name" pattern="[A-Za-z ]{1,32}" readonly>
                        <label for="c1" class="color-theme">Staff Full Name</label>
                    </div>
                    <div class="form-custom form-label form-icon mb-3">
                        <i class="bi bi-telephone-fill font-12"></i>
                        <input type="tel" class="form-control rounded-xs" id="first_party_contact_no" oninput='digitValidate(this)' placeholder="Phone Number" maxlength="10" pattern="[+ 0-9]{10,15}" readonly>
                        <label for="c3" class="color-theme">Phone Number</label>
                    </div>
                    <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="first_party_designation" placeholder="Designation" readonly>
                        <label for="c1" class="color-theme">Designation</label>
                    </div>
                    <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="first_party_other_details" placeholder="Other Details" >
                        <label for="c1" class="color-theme">Other Details</label>
                    </div>
                </div>
            @endif
            @if($dispute_type == 'Associate')
                <div class="form-label mb-3">
                    <select id="dispute_reason" class=" form-control js-choice" onchange="changeDisputeReason(this);">
                        <option value="">Select Dispute Reason</option>
                        <option value="Plot">Plot</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                
                <p class="scheme_name" style="margin-bottom: 0px;display:none;">Scheme Name</p>
                <div class="form-label mb-3 scheme_name" style="display:none;">
                    <select id="scheme_name" class=" form-control js-choice1" onchange="getPlot(this);">
                        <option value="">Select Scheme Name</option>
                        @if($scheme_data)
                            @foreach($scheme_data as $key => $value)
                                <option value="{{$value->id}}">{{$value->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <p class="scheme_name" style="margin-bottom: 0px;display:none;">Plot Name</p>
                <div class="form-label mb-3 plot_name" style="display:none;">
                    <select id="plot_name" class="form-control w-100" >
                        <option value="">Select Plot Name</option>
                       
                    </select>
                </div>

                <p  style="margin-bottom: 0px;">Associate Name</p>
                <div class="form-label mb-3">
                    <select id="associate_name" class=" form-control js-choice2" onchange="getsecondassociate(this);">
                        <option value="">Select Associate Name</option>
                        @if($associate_data)
                            @foreach($associate_data as $key => $value)
                                <option value="{{$value->id}}">{{$value->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <div class="associate_view" style="display:none;">
                    <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="second_party_associate_name" placeholder="Associate Full Name" pattern="[A-Za-z ]{1,32}" readonly>
                        <label for="c1" class="color-theme">Associate Full Name</label>
                    </div>
                    <div class="form-custom form-label form-icon mb-3">
                        <i class="bi bi-telephone-fill font-12"></i>
                        <input type="tel" class="form-control rounded-xs" id="second_party_associate_contact_no" oninput='digitValidate(this)' placeholder="Phone Number" maxlength="10" pattern="[+ 0-9]{10,15}" readonly>
                        <label for="c3" class="color-theme">Phone Number</label>
                    </div>
                    <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="second_party_associate_team" placeholder="Designation" readonly>
                        <label for="c1" class="color-theme">Team Name</label>
                    </div>
                    <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="second_party_associate_seniour_team" placeholder="Upliner Name" readonly>
                        <label for="c1" class="color-theme">Team Name</label>
                    </div>
                    <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="second_party_other_details" placeholder="Other Details" >
                        <label for="c1" class="color-theme">Other Details</label>
                    </div>
                </div>

            @endif

            <button class="btn btn-full bg-blue-dark rounded-xs text-uppercase font-700 w-100 btn-s mt-4" type="buttom" id="addInternalDisputeData">Next</button>
        </form>
    </div>
</div>
<style>
.select2-container .select2-selection--single {
    height: 40px!important;
    width: 100%!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 40px!important;
}
span.select2.select2-container.select2-container--default {
    width: 100%!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();
       
      $("#plot_name").select2({
          placeholder: "Select Plot Name ",
          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
    //   });

      var internalDisputeData = JSON.parse(localStorage.getItem('internalDisputeData')); 
        if(internalDisputeData != null){
           
            // $("#dispute_type").val(internalDisputeData.dispute_type);
            $("#staff_name").val(internalDisputeData.staff_name);
            $("#first_party_other_details").val(internalDisputeData.first_party_other_details)
            // getfirststaff();
            
            $("#dispute_reason").val(internalDisputeData.dispute_reason);
            $("#scheme_name").val(internalDisputeData.scheme_name);
            $("#plot_name").val(internalDisputeData.plot_name);
            $("#associate_name").val(internalDisputeData.associate_name);
            $("#second_party_other_details").val(internalDisputeData.second_party_other_details);
        }

    </script>
@endsection