@extends('layouts.app')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

@section('content')
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-breadcrumb-wrp">
                        <div class="page-header-breadcrumb">
                            <ul class="breadcrumb-title">
                                <li class="breadcrumb-item">
                                    <a href="{{ url('') }}"> <i class="feather icon-home"></i> </a>
                                </li>
                                <li class="breadcrumb-item">{{ __('Assign Application') }}</li>
                                <!-- <li class="breadcrumb-item">{{ __('Add') }}</li> -->
                            </ul>
                        </div>
                        <div class="page-header-title">
                            <div class="d-inline">
                                <h4>Assign Application</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-header end -->

        <!-- Page-body start -->
        <div class="page-body">
            <div class="row">
                <div class="col-sm-12">
                    <!-- Zero config.table start -->
                    <div class="card">
                        <div class="card-block">
                            <div class="mT-30">
                                @include('common.error')

                                <form class="" method="POST" action="{{ route('assign_application.user') }}"
                                    id="needs-validation">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6">
                                            <div class="form-group">
                                                <label for="">ISD User <span class="required"
                                                        style="color: red;">*</span></label>
                                                <select name="user_id" id="user_id" class="form-control" required>
                                                    <option value="">--Select--</option>
                                                    @foreach ($users as $value)
                                                        <option value="{{ $value->id }}">{{ $value->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg-6 col-md-6">
                                            <div class="form-group">
                                                <label for="">Program Name <span class="required"
                                                        style="color: red;">*</span></label>
                                                <select name="program" id="program" class="form-control program_change" required>
                                                    <option value="">--Select Program--</option>
                                                    @foreach ($programs as $key => $value)
                                                        <option value="{{ $key }}">{{ $value }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <hr class="colorgraph" />
                                        </div>
                                        <div class="col-lg-5 col-sm-12 col-xs-12">
                                            <label for="Name" style="vertical-align: top;">Unassign Application</label>
                                            <div id="MasterSelectBox" class="form-control"
                                                style="height: 350px; overflow-y: auto;">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 text-center vcenter-mw">
                                            <div>
                                                <div class="row vcenter">
                                                    <button data-toggle="tooltip"
                                                        title="Click here to add selected Application for program."
                                                        class="btn btn-success" type="button" id="btnAdd"> > </button>
                                                </div>
                                                <div class="row mt-5">
                                                    <button data-toggle="tooltip"
                                                        title="Click here to remove Selected from program."
                                                        class="btn btn-danger" type="button" id="btnRemove">
                                                        < </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-sm-12 col-xs-12">
                                            <label for="Name">Selected Application For Assign<span
                                                    style="color: red;">*</span></label>
                                            <div id="PairedSelectBox" class="form-control"
                                                style="height: 350px; overflow-y: auto;">
                                                <!-- Selected checkboxes will be dynamically populated here -->
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-md-12 mb-3 text-right">
                                            <button class="btn btn-m btn-primary" type="submit">Save</button>
                                            <a href="{{ url('interviewers') }}" class="btn btn-m btn-danger">Back</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-body end -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.program_change').change(function() {
                var languageId = $(this).val();
                $.ajax({
                    url: "{{ route('unassign_program_ajax') }}",
                    method: 'GET',
                    data: {
                        language_id: languageId
                    },
                    success: function(response) {
                        $('#MasterSelectBox').empty();
                        $('#MasterSelectBox').append(
                            '<label><input type="checkbox" id="selectAllCheckbox"> Select All</label><br>'
                            );
                        $.each(response.data, function(i, val) {
                            $('#MasterSelectBox').append(
                                '<label><input type="checkbox" name="application[]" value="' +
                                val.id +
                                '"> ' + val.name + '- '+ (val.phone !== null ? val.phone : '')+'</label><br>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
        $(document).on('change', '#selectAllCheckbox', function() {
            $('input[name="application[]"]').prop('checked', $(this).prop('checked'));
        });



        $(document).ready(function() {
            $('#btnAdd').click(function() {
                $('#MasterSelectBox input:checked').each(function() {
                    $(this).parent().appendTo('#PairedSelectBox');
                });
            });

            $('#btnRemove').click(function() {
                $('#PairedSelectBox input:checked').each(function() {
                    $(this).parent().appendTo('#MasterSelectBox');
                });
            });
        });

        // $(document).ready(function() {
        //     $('#btnAdd').click(function() {
        //         $('#MasterSelectBox option:selected').appendTo('#PairedSelectBox');
        //     });

        //     $('#btnRemove').click(function() {
        //         $('#PairedSelectBox option:selected').appendTo('#MasterSelectBox');
        //     });
        // });
        (function(e) {
            function t(t, n) {
                this.defaults = {
                    attribute: "value"
                };
                this.opts = e.extend({}, this.defaults, n);
                this.$el = e(t);
                this.items = new Array
            }
            t.prototype = {
                init: function() {
                    var t = this;
                    e("option", this.$el).each(function(n, r) {
                        var i = e(r);
                        i.data("status", "enabled");
                        t.items.push({
                            attribute: i.attr(t.opts.attribute),
                            $el: i
                        })
                    })
                },
                transferElement: function(t) {
                    var n = e(t).attr(e(this)[0].opts.attribute);
                    e.each(this.items, function(e, t) {
                        if (t.attribute == n) {
                            t.$el.remove();
                            t.$el.data("status", "disabled")
                        }
                    })
                },
                bringBackElement: function(t) {
                    var n = this;
                    var r = e(t).attr(e(this)[0].opts.attribute);
                    e.each(this.items, function(e, t) {
                        if (t.attribute == r) {
                            var i = e + 1;
                            while (true) {
                                if (i < n.items.length) {
                                    if (n.items[i].$el.data("status") == "enabled") {
                                        n.items[i].$el.before(t.$el);
                                        t.$el.data("status", "enabled");
                                        break
                                    } else {
                                        i++
                                    }
                                } else {
                                    n.$el.append(t.$el);
                                    t.$el.data("status", "enabled");
                                    break
                                }
                            }
                        }
                    })
                }
            };
            e.fn.pairMaster = function(n) {
                if (this.length) {
                    this.each(function() {
                        var r = new t(this, n);
                        r.init();
                        e(this).data("pairselect", r)
                    })
                }
            };
            e.fn.addSelected = function(t) {
                var n = e(this).find(":selected");
                var r = this;
                e.each(n, function(n, i) {
                    e(r).data("pairselect").transferElement(i);
                    if (t) {
                        e(t).append(i)
                    }
                })
            };
            e.fn.removeSelected = function(t) {
                var n = e(this).find(":selected");
                e.each(n, function(n, r) {
                    e(r).remove();
                    if (t) {
                        e(t).data("pairselect").bringBackElement(r)
                    }
                })
            }
        })(jQuery)
    </script>
@endsection