{{ View::make('layout.header') }}
<style>
    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 670px;
        }

        .modal-content {
            padding: 10px;
        }
    }
</style>
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="modal-title" id="exampleModalLabel">Are you sure want unassign this duty roster?</h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger reject-btn">OK</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade text-left" id="inlineForm11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Update Duty Roster</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="col-md-6">
                <h6 class="modal-title" id="Empname"></h6>
                <input type="hidden" name="username" id="username" value="">
                <label>Select Duty Roster :</label>
                <select class="form-control" name="duty_roster_id" id="duty_roster_id">

                    @foreach ($dutyraoster as $value)
                        <option value="{{ $value->id }}" selected>{{ $value->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class='col-md-6'>
                <a onclick='updatedutyroaster()' style='margin-top:23px;' class='edcc btn btn-info'>Update</a>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

<!-- BEGIN: Content-->

<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">HR
                                </li>
                                <li class="breadcrumb-item"><a href="{{ route('setupHr') }}">Setup</a>
                                </li>
                                <li class="breadcrumb-item"><a href="{{ route('dutyroaster-to-emp') }}">Duty Roster to
                                        Employee</a>
                                </li>

                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- Dashboard Ecommerce Starts -->
            <section id="multiple-column-form">
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="card">
                            <div class="card-header ptitle" style="padding:1rem; color:#fff;">
                                <h4 class="card-title" style="color:#fff;">Assign Duty Roster to Employee</h4>
                            </div>
                            <div class="card-body">

                                <article class="">
                                    <div class="left2c">
                                        <div class="activity " style="min-height:396px">
                                            <div class="leave row empdata">

                                                <div class="col-md-6" style="margin-top:10px">
                                                    <label class="applyleaveleft">Select Duty Roster Type</label>
                                                    <div class="applyleaveright col-md-12" style="padding:0px;">
                                                        <select class="select form-control" name="dutyroaster_id"
                                                            id="dutyroaster_id" onchange="filterdata1(this.value)"></select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6" style="margin-top:10px">
                                                    <label class="applyleaveleft">Select Branch &nbsp;:&nbsp;</label>
                                                    <div class="applyleaveright col-md-12" style="padding:0px;">
                                                        <select class="select form-control" name="branch"
                                                            id="branch" onchange="empselect();"></select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6" style="margin-top:10px">
                                                    <label class="applyleaveleft">Select Department
                                                        &nbsp;:&nbsp;</label>
                                                    <div class="applyleaveright col-md-12" style="padding:0px;">
                                                        <select class="select form-control" name="department"
                                                            id="department" onchange="empselect();"></select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6" style="margin-top:10px">
                                                    <label class="applyleaveleft">Select Category &nbsp;:&nbsp;</label>
                                                    <div class="applyleaveright col-md-12" style="padding:0px;">
                                                        <select class="select form-control" name="category"
                                                            id="category" onchange="empselect();"></select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12" style="margin-top:10px">
                                                    <label class="applyleaveleft">Select Employees
                                                        &nbsp;:&nbsp;</label>
                                                    <div class="applyleaveright col-md-12" style="padding:0px;">
                                                        <input type="text" placeholder="Search" id="staffnamenum"
                                                            name="staffnamenum" class="inptxt  form-control"
                                                            onkeyup="searchemp();" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="leave">

                                                <div class="applyleaveright">
                                                    <span id="message"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" style="">
                        <div class="d-flex align-items-center">
                            <h4 class="card-title" style="margin-bottom:0px;">Employee Data</h4>
                        </div>

                        <div class="row">
                            <div class="mt-2">
                                <button type="button"
                                    class="btn btn-danger waves-effect waves-float waves-light  reject-visible-btn"
                                    disabled>Delete</button>
                            </div>
                            &nbsp;
                            &nbsp;
                            <div>
                                <span class="align-items-right">Select Duty Roster</span>
                                <select class="select form-control" name="dutyRoaster_type" id="dutyRoaster_type"
                                    onchange="filterdata(this.value)">
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="card-body" style="padding-top:0px !important; ">
                        <div class="table-responsive " style="overflow-x: unset !important;">
                            <table class="table table-striped" id="reporttable" style=" font-size:12px;">
                                <thead>
                                    <tr>
                                        <th style="text-transform: capitalize;" width="35%">Name</th>
                                        <th width="20%" style="text-transform: capitalize;">Duty roster</th>
                                        <th style="text-transform:capitalize; text-align:center;white-space: nowrap; border: none;"
                                            width="4%"><input type="checkbox" id="checkAll"></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </section>


        </div>
    </div>
    <!-- END: Content-->
    {{ View::make('layout.footer') }}

    <!-- /// select employees javascript starts///-->
    <script type="text/javascript">
        var resObj;

        function sureTransfer(from, to, all) {
            if (from.getElementsByTagName && to.appendChild) {
                while (getCount(from, !all) > 0) {
                    transfer(from, to, all);
                }
            }
        }

        function getCount(target, isSelected) {
            var options = target.getElementsByTagName("option");
            if (!isSelected) {
                return options.length;
            }
            var count = 0;
            for (i = 0; i < options.length; i++) {
                if (isSelected && options[i].selected) {
                    count++;
                }
            }
            return count;
        }

        function transfer(from, to, all) {
            if (from.getElementsByTagName && to.appendChild) {
                var options = from.getElementsByTagName("option");
                for (i = 0; i < options.length; i++) {
                    if (all) {
                        to.appendChild(options[i]);
                    } else {
                        if (options[i].selected) {
                            to.appendChild(options[i]);
                        }
                    }
                }
            }
        }

        function sureTransfer1(from1, to1, all1) {
            if (from1.getElementsByTagName && to1.appendChild) {
                while (getCount1(from1, !all1) > 0) {
                    transfer1(from1, to1, all1);
                }
            }
        }

        function getCount1(target, isSelected) {
            var options = target.getElementsByTagName("option");
            if (!isSelected) {
                return options.length;
            }
            var count = 0;
            for (i = 0; i < options.length; i++) {
                if (isSelected && options[i].selected) {
                    count++;
                }
            }
            return count;
        }

        function transfer1(from1, to1, all1) {
            if (from1.getElementsByTagName && to1.appendChild) {
                var options = from1.getElementsByTagName("option");
                for (i = 0; i < options.length; i++) {
                    if (all1) {
                        to1.appendChild(options[i]);
                    } else {
                        if (options[i].selected) {
                            to1.appendChild(options[i]);
                        }
                    }
                }
            }
        }
    </script>
    <!-- /// select employees javascript ends ///-->

    <script type="text/javascript">
        $(document).ready(function() {
            getDepartment();
            getDutyRoasterId('duty_roaster');
            employeedutyroasterData("");
            getuser();
        });





        function getDepartment() {
            $.ajax({
                type: 'get',
                url: '{{ route('getdepartmentList') }}',
                success: function(data) {
                    var resObj = data;
                    var html11 = "";
                    html11 += '<option value="">Click to Choose one</option>';
                    //  console.log('getDepartment called');
                    //  console.log(html11);
                    for (var i = 0; i < resObj.length; i++) {
                        html11 += '<option value="' + resObj[i].id + '">' + resObj[i].name + '</option>';
                    }
                    $("#department").html(html11);

                    getCategory();
                }
            });
        }

        function getCategory() {

            $.ajax({
                type: 'get',
                url: '{{ route('getcategoryList') }}',
                success: function(data) {
                    var resObj = data;
                    var html22 = "";
                    html22 += '<option value="">Click to Choose one</option>';
                    for (var i = 0; i < resObj.length; i++) {
                        html22 += '<option value="' + resObj[i].id + '">' + resObj[i].name + '</option>';
                    }
                    $("#category").html(html22);

                    getBranch();
                }
            });
        }

        function getBranch() {
            $.ajax({
                type: 'get',
                url: '{{ route('getbranchList') }}',
                success: function(data) {
                    var resObj = data;
                    var html33 = "";
                    html33 += '<option value="">Click to Choose one</option>';
                    for (var i = 0; i < resObj.length; i++) {
                        html33 += '<option value="' + resObj[i].id + '">' + resObj[i].name + '</option>';
                    }
                    $("#branch").html(html33);
                }
            });
        }

        function getDutyRoasterId(eattendance_type) {

            $.ajax({
                type: 'get',
                url: '{{ route('getdutyRoasterType') }}',
                data: {
                    eattendance_type: eattendance_type
                },
                success: function(data) {
                    var resObj = data;

                    var html33 = "";
                    var html34 = "";
                    var html35 = "";

                    var html36 = '<option value="">Click to Choose one</option>';
                    html33 += '<option value="">All</option>';
                    html34 += '<option value="not_assign_duty_Roaster">Not Assign</option>';

                    for (var i = 0; i < resObj.length; i++) {

                        html34 += '<option value="' + resObj[i].id + '">' + resObj[i].name + '</option>';
                        html35 += '<option value="' + resObj[i].id + '">' + resObj[i].name + '</option>';
                    }
                    // console.log(html35);
                    $("#dutyroaster_id").html(html36 + html35);
                    $("#dutyRoaster_type").html(html33 + html34);
                }
            });
        }


        function empselect() {
            $.ajax({
                type: 'get',
                url: '{{ route('getGroupedUsers') }}',
                data: {
                    department_id: $("#department").val(),
                    branch_id: $("#branch").val(),
                    category_id: $("#category").val(),
                    dataType: "{{ $dataType }}"
                },
                success: function(data) {
                    var resObj = data;
                    var html = "";

                    for (var i = 0; i < resObj.length; i++)
                        html += '<option value="' + resObj[i].username + '">' + resObj[i].name + '</option>';

                    $("#source").html(html);
                }
            });

        }



        function getuser() {

            $.ajax({
                type: 'get',
                url: '{{ route('empdutyroasterdata') }}',
                data: {
                    keyword: "",
                    dataType: "{{ $dataType }}"
                },
                success: function(data) {
                    console.log('ddd');
                    var resObj = data.data;
                    var html = "";
                    html +=
                        '<div class="col-md-6" style="margin-top:10px"><label class="applyleaveleft">Select Employee &nbsp;:&nbsp;</label><select name="source" id="source" size="8" MULTIPLE class="select form-control" style="width:100%; overflow:scroll;">';

                    for (var i = 0; i < resObj.length; i++) {
                        html += '<option value="' + resObj[i].username + '">' + resObj[i].name + '</option>';
                    }
                    html +=
                        '</select></div><div class="col-md-6" style="margin-top:10px"><label class="applyleaveleft">Selected Employee &nbsp;:&nbsp;</label><select name="target" id="target" size="8" MULTIPLE class="select form-control" style="width:100%; overflow:scroll;"></select></div>';
                    html +=
                        '<div class="col-md-12" style="margin-top:10px"><div class="row d-flex justify-content-between card-body">';

                    html +=
                        '<div class=""><input type="button" class="add btn btn-success waves-effect waves-float waves-light" id="src2TargetAll" name="src2TargetAll" value="Add >>" style="margin-bottom:5px"></div>';
                    html +=
                        '<div class=""><input type="button" class="add btn btn-success waves-effect waves-float waves-light" id="src2Target" name="src2Target" value="Add >" style="margin-bottom:5px"></div>';
                    html +=
                        '<div class=""><input type="button" value="Apply" onclick="mapAttendance()" class="apply btn btn-primary waves-effect waves-float waves-light"></div>';
                    html +=
                        '<div class=""><input type="button" class="remove btn btn-danger waves-effect waves-float waves-light" id="target2Src" name="target2Src" value="< Remove" style="margin-bottom:5px"></div>';
                    html +=
                        '<div class=" text-right"><input type="button" class="remove btn btn-danger waves-effect waves-float waves-light" id="target2SrcAll" name="target2SrcAll" value="<< Remove"></div></div></div>';

                    $(".empdata").append(html);
                    selempsec();


                }
            });

        }

        var state;
        var basicPickr = $('.flatpickr-basic');
        if (basicPickr.length) {
            basicPickr.flatpickr({
                altInput: true,
                altFormat: 'd-m-Y',
                dateFormat: 'Y-m-d'
            });
        }
        ///update duty roASTER
        $(document).on("click", ".appDialog-model", function() {
            var empUsername = $(this).data('id');
            var empRoaster = $(this).data('roaster');
            name = $(this).data('name');
            $('#Empname').text(name);
            $("#username").val(empUsername);
            $("#duty_roster_id").val(empRoaster);
        });

        $(document).on('click', '.reject-visible-btn', async function() {
            var val = await unassigndutyroaster();
        });

        function updatedutyroaster() {

            $.ajax({
                url: "{{ route('updateAssigndutyroaster') }} ",
                method: 'POST',
                data: {
                    _token: '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/E-Attendance/dutyRoaster/dutyroaster_to_emp.blade.php:483
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/E-Attendance/dutyRoaster/dutyroaster_to_emp.blade.php</b> on line <b>483</b><br />