@extends('layouts.default', ['appTopMenu' => true])

@section('title', 'Additional Party')
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> -->

@push('head')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>

<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="/assets/plugins/select2/dist/js/select2.min.js"></script>
<!-- <script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script> -->
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
<script src="{{ asset('js/filing/additional_party.js') }}"></script>

<script>
 
</script>

<style>
    /*Custom CSS*/
    span {
        transition: color 0.5s ease-in;
    }

    label:focus-within span {
        color: blue;
    }

    input {
        display: block;
        width: 100%;
    }

    label,
    select {

        display: block;
        width: 100%;
        max-width: 100%;
    }
    /*Profile Pic Start*/
    .picture-container{
        position: relative;
        cursor: pointer;
        text-align: center;
    }
    .picture{
        width: 106px;
        height: 106px;
        background-color: #999999;
        border: 4px solid #CCCCCC;
        color: #FFFFFF;
        border-radius: 50%;
        margin: 0px auto;
        overflow: hidden;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }
    .picture:hover{
        border-color: #2ca8ff;
    }
    .picture input[type="file"] {
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .picture-src{
        width: 100%;

    }
    /*Profile Pic End*/
    .form-control:focus, .form-select:focus, .form-check-input:focus, .select2:focus-within{
        border-color: #6265e4 !important;
        box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
    }

    .form-check-input:checked {
  background-color: #1a1b1c;
  border-color: #fff;
}
</style>
@endpush
@section('content')
<script>
@if (Session::has('success'))

   swal("{{Session::get('success')}}").then(function() {
//window.location = "/project/" + loc;
});
        @endif


</script>


<section>
    <div class="row">
        <div class="col-xl-12" id="showdetail">
            <!--  For Case Type and Bench ---->
            <div class="card mb-0" data-sortable-id="form-stuff-3">
                <div class="card-header card-bg-color ">
                    Additional Party
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="card border-0">
                            <div class="row" style="float:none;margin:auto;">
                                
                                <div class="col-sm-4">
                                    <label class="control-label" for="txt_cadre"><b>Case Type</b></label>
                                    <select class="form-control form-select" id="case_type" name="case_type">
                                        <option value="">Select</option>
                                        @foreach($getHCCaseType as $ct)
                                            <option value="{{ $ct->id }}">{{ $ct->skey." - ".ucwords(strtolower($ct->casename)) }}</option>
                                        @endforeach    
                                    </select>
                                    <small id="case_type_e" class="text-danger"></small>
                                </div>
                                <div class="col-sm-3">
                                    <label class="control-label" for="txt_cadre"><b>Case No.</b></label>
                                    <input type="text" placeholder="Case No." class="form-control" id="case_no" name="case_no" onkeypress="return onlynumbers(event)" />
                                    <small id="case_no_e" class="text-danger"></small>
                                </div>
                                <div class="col-sm-3">
                                    <label class="control-label" for="txt_cadre"><b>Year</b></label>
                                    <select class="form-control form-select" id="case_year" name="case_year">
                                        <option value="">Select</option>
                                        @for($i = date("Y"); $i >= 1930; $i--)
                                            <option value="{{ $i }}">{{ $i }}</option>
                                        @endfor    
                                    </select>
                                    <small id="case_year_e" class="text-danger"></small>
                                </div>
                                <div class="col-sm-2 mt-3">
                                    <label class="control-label" for="txt_cadre"><b></b></label>
                                    <input type="button" id="btn_search" class="btn-primary form-control" value="Submit" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-1" id="dv_showresult"></div>
                    <div class="mt-1" id="result2"></div>
                </div>
            </div> 
        </div>
    </div>    
</section>
@endsection