@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'DA Case Allotment')
@push('head')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></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>
<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>
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>


<script type="text/javascript" src="{{ asset('/assets/dcopying/toastr/toastr.min.js') }}"></script>
<link href="{{ asset('/assets/dcopying/toastr/toastr.min.css') }}" rel="stylesheet" />
<link href="{{ asset('/assets/dcopying/css/custom.css') }}" rel="stylesheet" />
<script type="text/javascript" src="{{ asset('/assets/dcopying/js/custom.js') }}"></script>




<script src="../assets/plugins/sweetalert/dist/sweetalert.min.js"></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;
    }
</style>
@endpush
@section('content')
<section class="mb-1 bg-white">
    <div class="row align-items-center">
        <div class="col-md-12 mb-2">
            <div class="panel">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">DA Case Allotment</h4>
                </div>
                <form method="POST">
                    @csrf
                    <div class="panel-body">
                        <div class="row">
                            <div class='col-md-2 mb-2'>
                                <div class='md-form'>
                                    <label class="control-label" for="ddl_cadre"><b>Section Officer</b></label>
                                    <select class="form-select form-select-sm" name='SectionTable' id='SectionTable'>
                                        <option value=''>Select Section Officer</option>
                                        @if(!empty($results))
                                        @if(count($results)>0)
                                        @foreach($results as $item)
                                        <option value='{{$item->id}}'>{{$item->section_abbr}} - {{$item->section_name}}</option>
                                        @endforeach
                                        @endif
                                        @endif
                                    </select>
                                    </label>
                                    <input type="hidden" id="primary" value="" />
                                </div>
                            </div>
                            <div class="col-sm-2 @error('ddl_da') has-error @enderror">
                                <label class="control-label" for="ddl_da"><b>Dealing Assistant</b></label>
                                <!--<select name="ddl_member" id="ddl_member" class="form-select form-select-sm">-->
                                <select name="ddl_da" id="ddl_da" class="form-select form-select-sm @error('ddl_da') is-invalid @enderror" onchange="loadtable()">
                                    <option value="">Select Dealing Assistant</option>
                                </select>
                                @error('ddl_da')
                                <small class="help-block text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-sm-2 @error('da_case') has-error @enderror">
                                <label class="control-label" for="da_case"><b>Case Type</b></label>
                                <!--<select name="ddl_member" id="ddl_member" class="form-select form-select-sm">-->
                                <select name="da_case" id="da_case" class="form-select form-select-sm @error('da_case') is-invalid @enderror" onchange="loadtable()">
                                    <option value="">Select Dealing Assistant</option>
                                </select>
                                @error('da_case')
                                <small class="help-block text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class='col-md-1 mb-2'>
                                <div class='md-form'>
                                    <label for='pin' class='control-label'><span><b>From</b></span>
                                        <input type='text' id='from_range' name='from_range' class='form-control' value=''>

                                    </label>
                                </div>
                            </div>
                            <div class='col-md-1 mb-2'>
                                <div class='md-form'>
                                    <label for='pin' class='control-label'><span><b>To</b></span>
                                        <input type='text' id='to_range' name='to_range' class='form-control' value=''>
                                    </label>
                                </div>
                            </div>
                            <div class='col-md-1 mb-2'>
                                <div class='md-form'>
                                    <label for='pin' class='control-label'><span><b>Year</b></span>
                                        <input type='text' id='case_year' name='case_year' class='form-control' value='2024'>
                                    </label>
                                </div>
                            </div>

                            <div class='col-md-1 mb-2'>
                                <div class='md-form'>
                                    <label for='pin' class=''><span>&nbsp;</span>
                                        <input type='button' id='save_range' name='save_range' class='btn btn-primary btn-sm form-control' value='SUBMIT'>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="row" id='inputcol'>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="panel">
                <div class="panel-heading  card-bg-color ">
                    <h4 class="panel-title">DA Case Allotment</h4>
                    <div class="panel-heading-btn">
                        <a href="#" class="btn btn-xs btn-icon btn-circle btn-default" data-toggle="panel-expand">
                            <i class="fa fa-expand"></i>
                        </a>
                        <a href="#" class="btn btn-xs btn-icon btn-circle btn-success" data-toggle="panel-reload">
                            <i class="fa fa-repeat"></i>
                        </a>
                        <a href="#" class="btn btn-xs btn-icon btn-circle btn-warning" data-toggle="panel-collapse">
                            <i class="fa fa-minus"></i>
                        </a>
                        <a href="#" class="btn btn-xs btn-icon btn-circle btn-danger" data-toggle="panel-remove">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="panel-body tabledata">

                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- Modal -->
<div class="modal fade" id="updateDaAllotment" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    <form action="{{route('updateCaseAllotment')}}" method="POST" id="formheadcopyiest">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Update Headcopyiest</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body min-h">
        <div class="modal_loader_div" style="display: none;"></div>
        <div class="modal-body-inner">
        <input type="hidden" class="form-control" id="id" value="" name="id">
     
  <div class="mb-3">
    <label for="case_from_no" class="form-label">From Case No.</label>
    <input type="text" class="form-control" id="case_from_no" name="case_from_no" value="">
  </div>
  <div class="mb-3">
    <label for="case_to_no" class="form-label">To Case No.</label>
    <input type="text" class="form-control" id="case_to_no" name="case_to_no" value="">
  </div>
  <div class="mb-3">
    <label for="case_from_year" class="form-label">case_from_year</label>
    <input type="text" class="form-control" id="case_from_year" name="case_from_year" value="">
  </div>

  <button class="btn btn-primary button-loader" data-loading-text="<i class='fa-solid fa-circle-notch fa-spin'></i> Loading..." type="submit">Update</button>
</form>



        </div>

      </div>

    </div>

</section>

@endsection
@push('scripts')
<script>


$(document).on('click', '.update_record', function(e) {
    var recordid = $(this).data('recordId');
    getFeedback(recordid);

  });



  let getFeedback = (recordid) => {

var url = "{{ route('editCaseAllotment', ":recordid") }}";
url = url.replace(':recordid', recordid);


    $.ajax({
     
      url: url,
     
      type: "GET",
      data: {
        "recordid": recordid
      },
      dataType: 'json',
      beforeSend: function() {
        $('#updateDaAllotment').modal('show');
        
        $('#updateDaAllotment .modal-body .modal_loader_div').css("display", "block");

      },
      success: function(data) {
        console.log(data.dacase_allotment);
        $('#id').val(data.dacase_allotment.id);
        $('#case_from_year').val(data.dacase_allotment.case_from_year);
         $('#case_from_no').val(data.dacase_allotment.case_from_no);
         $('#case_to_no').val(data.dacase_allotment.case_to_no);
        $('#updateDaAllotment .modal-body .modal_loader_div').fadeOut(400);
      },
      error: function(xhr) { // if error occured
        alert("Error");

      },
      complete: function() {

      }
    });
  }



  $(document).on("submit", "form#formheadcopyiest", function(e) {
    e.preventDefault();
    let _this = $(this);

    $.ajax({
      url: _this.attr("action"),
      type: _this.attr("method"),
      dataType: "JSON",
      data: $(this).serialize(),
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function() {

        _this.closest('form').find(':submit').button('loading');
      },

      success: function(response) {
        successMsg(response.msg);

        _this.closest('form').find(':submit').button('reset');
        window.location.reload();
        $('#updateDaAllotment').modal('hide');
      
      },
      error: function(xhr) {
        _this.closest('form').find(':submit').button('reset');

      },
      complete: function() {
        _this.closest('form').find(':submit').button('reset');
      }
    });
  });


    $("#updateDaAllotment").on("hidden.bs.modal", function(e) {
        $("#formheadcopyiest").find('input:text, input:password, input:file, select, textarea').val('');
  });



function titleCase(str) {
    return str.toLowerCase().split(' ').map(function (word) {
        return (word.charAt(0).toUpperCase() + word.slice(1));
    }).join(' ');
}
    $(document).ready(function() {
        $(document).on('change', '#SectionTable', function() {
            var section = $(this).val();
            $.ajax({
                url: "getDaBySection",
                type: 'GET',
                cache: false,
                async: false,
                beforeSend: function() {

                },
                data: {
                    section: section
                },
                success: function(data, status) {
                    var model = $('#ddl_da');
                    model.empty();
                    var html = "<option value=''>Select Dealing Assistant</option>";
                    $.each(data, function(index, element) {
                        html += "<option value='" + element.id + "#" + element.post_code + "'>" + titleCase(element.name) + ' - ' + titleCase(element.post_name) + "</option>";
                    });
                    model.append(html);
                },
                error: function(xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
            });
            // load the table also

            $.ajax({
                url: "getCaseTypeBySection",
                type: 'GET',
                cache: false,
                async: false,
                beforeSend: function() {

                },
                data: {
                    section: section
                },
                success: function(data, status) {
                    var model = $('#da_case');
                    model.empty();
                    var html = "<option value=''>Select Case Type</option>";
                    $.each(data, function(index, element) {
                        html += "<option value='" + element.casetype + "'>" + element.skey + "</option>";
                    });
                    model.append(html);
                },
                error: function(xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
            });

        });

        $(document).on('click', '#save_range', function() {
            var section = $('#SectionTable').val();
            var ddlda = $('#ddl_da').val();
			var temp_da = ddlda.split('#');
			ddlda = temp_da[0];
			var post_code=temp_da[1];
			var da_case = $('#da_case').val();
			var from_range = $('#from_range').val();
            var to_range = $('#to_range').val();
            var case_year = $('#case_year').val();
if(section==''){
alert('Select Section!');
return false;
}
if(ddlda==''){
alert('Select Dealing Assistant!');
return false;
}
if(da_case==''){
alert('Select Case Type!');
return false;
}
if(from_range==''){
alert('Enter From Range!');
return false;
}
if(to_range==''){
alert('Enter To Range!');
return false;
}
if(case_year==''){
alert('Enter Case Year!');
return false;
}
            
            $.ajax({
                url: "addCaseRange",
                type: 'GET',
                cache: false,
                async: false,
                beforeSend: function() {},
                data: {
                    section: section,
                    ddlda: ddlda,
					post_code: post_code,
					da_case: da_case,
                    from_range: from_range,
                    to_range: to_range,
                    case_year: case_year
                },
                success: function(data, status) {
                    alert(data);
					loadtable(); 
                },
                error: function(xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
            });
            // load the table also
            //    loadtable(utype, 0)
        });



    });



    function loadtable() {
        var da = document.getElementById('ddl_da').value;
		var temp_da = da.split('#');
		da=temp_da[0];
        $.ajax({
            url: "getDataTableByDA",
            type: 'GET',
            cache: false,
            async: false,
            beforeSend: function() {

            },
            data: {
                da: da
            },
            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