@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'Portfolio Judge')

<!-- <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="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
<!-- <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" defer></script>
<!-- <script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.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 mt-0" data-sortable-id="form-stuff-3">
                <div class="card-header card-bg-color ">
                    Portfolio Judge
                </div>
                <form method="post" action="/add_portfolio_judge">
                @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="card border-0">
                                <div class="row" id="education_fields">
                                    <div class="col-sm-3">
                                        <label class="control-label"><b>Hon'ble Judge</b></label>
                                        <input type="hidden" id="id" name="id" />
                                        <select class="form-control form-select  @error('zone') is-invalid @enderror" id="judge" name="judge" onchange="loadtable()">
                                            <option value="">Select Hon'ble Judge</option>
                                            @foreach($getJudges as $jud)
                                                <option {{ old('judge') == $jud->id ? "selected" : "" }} value="{{ $jud->id }}">{{ $jud->name ." -> ". $jud->est_name }}</option>
                                            @endforeach    
                                        </select>
                                        @error('judge')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-sm-2">
                                        <label class="control-label"><b>District</b></label>
                                         <select name="district[]" id="district" class="multiple-select2 form-control form-control-sm @error('district') is-invalid @enderror"  multiple>
                                            @foreach ($getDistricts as $dis)
                                            <option value="{{ $dis->id }}">{{ $dis->est_name }}</option>
                                            @endforeach
                                            <option value="-1">Family Courts, Jabalpur Zone</option>
                                            <option value="-2">Family Courts, Indore Zone</option>
                                            <option value="-3">Family Courts, Gwalior Zone</option>
                                        </select>
                                        @error('district')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    
                                     <div class="col-sm-1">
                                        <label class="control-label"><b>From Date</b></label>
                                        <input type="text" size="10" class="form-control from_data @error('from_date') is-invalid @enderror"  id="from_date" value="04-05-2023" name="from_date" />
                                    </div>
                                    <div class="col-sm-1 todate">
                                        <label class="control-label"><b>To Date</b></label>
                                        <input type="text" size="10" class="form-control from_data @error('to_date') has-error @enderror"  id="to_date" name="to_date" />
                                    </div>
                                    <div class="col-sm-1">
                                        <label class="control-label" ><b>&nbsp;</b></label>
                                        <input type="submit" id="btn_portfolio" name="btn_portfolio" class="btn-primary form-control" value="Save">
                                    </div>                                    
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card mt-1" data-sortable-id="form-stuff-3">
                <div class="card-header card-bg-color ">
                    Alloted District of Portfolio Judge
                </div>
                <div class="card-body tabledata">
                   
                </div>    
            </div>    
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {

    loadtable();

    $(".multiple-select2").select2({
       // placeholder: "Select Users", 
       // minimumInputLength : 3
    });

    $(".todate").hide();

    $("#from_date").datepicker({
        todayHighlight: true,
        autoclose: true,
        format : "dd-mm-yyyy"
    });

    $("#to_date").datepicker({
        todayHighlight: true,
        autoclose: true,
        format : "dd-mm-yyyy"
    });

    $(document).on("click", ".pr-1", function(){
        
        var id = this.id;
        var ids = id.split("-");
        var act = ids[0];
        id = ids[1];
        $.ajax({
            url: "edit_portfolio_judge",
            type: 'GET',
            cache: false,
            async: false,
            beforeSend:function(){

            },
            data: {id:id},
            success: function (data, status){
                var result = (data[0]);
                var columns = String(Object.values(result[0])).split(',');
                $("#judge").val(columns[3]);    
                $("#id").val(id);    
                $("#district").val(columns[2]).trigger('change');    
                var date = columns[4].split("-");
                $("#from_date").val(date[2]+"-"+date[1]+"-"+date[0]);  
                $("#btn_portfolio").val("Update");  
                $(".todate").show();  
                $("#district").prop("disabled", true);
            },    
            error: function (xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }
        });               
    });
});  

function loadtable(){
    judge = $("#judge").val();
    if (judge !== "") {
        $.ajax({
            url: "get_portfolio_district",
            type: 'GET',
            cache: false,
            async: false,
            beforeSend:function(){

            },
            data: {judge:judge},
            success: function (data, status){
                $(".tabledata").html("");
                $(".tabledata").html(data);
                $('#data-table-default').DataTable({
                    "pageLength": 10,
                    responsive: {
                        details: false
                    }
                });                
            },

            error: function (xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }    
        });
    }else{
        $.ajax({
            url: "get_all_portfolio_district",
            type: 'GET',
            cache: false,
            async: false,
            beforeSend:function(){

            },
            data: {},
            success: function (data, status){
                $(".tabledata").html("");
                $(".tabledata").html(data);
                $('#data-table-default').DataTable({
                    "pageLength": 10,
                    responsive: {
                        details: false
                    }
                });                
            },

            error: function (xhr) {
                alert("Error:" + xhr.status + ' ' + xhr.statusText);
            }    
        });
    }    
}
</script>
@endpush