@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    img.general {
        height: 50px;
        margin-bottom: 20px;
    }

    img.loading {
        height: 200px;
        margin-bottom: 20px;
    }

    @media screen and (max-width:480px) {
        .p-4 {
            padding: 0.8rem !important;
        }

        .page-title-box {
            padding-bottom: 15px;
        }
    }

    .nav-justified .nav-item {
        -webkit-box-flex: 1;
        flex-grow: 1;
        text-align: center;
    }

    .nav-justified .nav-item {
        flex-basis: unset !important;
    }

    .nav-fill .nav-item .nav-link,
    .nav-justified .nav-item .nav-link {
        width: unset !important;
    }

    .d-sm-block {
        display: block !important;
        clear: both;
        overflow: hidden;
        white-space: nowrap;
    }

    span#cke_142,
    span#cke_140,
    span#cke_135,
    span#cke_131,
    span#cke_129,
    span#cke_121,
    span#cke_70,
    span#cke_78,
    span#cke_80,
    span#cke_84,
    span#cke_89,
    span#cke_91,
    span#cke_19,
    span#cke_27,
    span#cke_29,
    span#cke_33,
    span#cke_38,
    span#cke_40 {
        display: none;
    }

    .label {
        cursor: pointer;
    }

    .progress {
        display: none;
        margin-bottom: 1rem;
    }

    .alert {
        display: none;
    }

    .img-container img {
        max-width: 100%;
    }

    label.form-label.addweight {
        font-weight: 900;
    }

    .me-5 {
        margin-right: 0px !important;
    }

    .workareaopt {
        align-items: center;
    }

    .table> :not(caption)>*>* {
        padding: 0.5rem 0.75rem;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        @include('../reachassuree_agent/master/comman/header')
        @include('../reachassuree_agent/setting/webpage_setting/comman')

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="tab-content">
                        <!-- about as add page content -->
                        <form method="POST" id="Formworkarea" action="{{ route('work.area.save') }}" class="needs-validation" novalidate>
                            @csrf
                            <input type="hidden" name="work_area_id" value="0" id="work_area_id">

                            <div class="col-md-12">
                                <label class="form-label addweight">Select Work Area<span class="text-danger">*</span></label>
                            </div>

                            <div class="row">
                                @php
                                    $columnCount = 3;
                                    $permissionCount = count($data['workAreaContain']);
                                    $columnSize = ceil($permissionCount / $columnCount);
                                    $columnIndex = 0;
                                @endphp

                                @foreach($data['workAreaContain'] as $key => $value)
                                    @if($columnIndex % $columnSize === 0)
                                        <div class="col-md-3">
                                    @endif

                                    <div class="mb-3">
                                        <input class="form-check-inline" type="checkbox" name="work_area_name[]" id="work_area_name_{{$value['id']}}" value="{{$value['name']}}">
                                        <label class="form-check-label me-5" for="work_area_name_{{$value['id']}}">{{$value['name']}}</label>
                                        <div class="help-block with-errors"></div>
                                    </div>

                                    @php
                                        $columnIndex++;
                                    @endphp

                                    @if($columnIndex % $columnSize === 0 || $columnIndex === $permissionCount)
                                        </div>
                                    @endif
                                @endforeach

                                <div class="float-end">
                                    <button class="btn btn-primary px-5 me-2" type="submit" id="btnWorkArea">Save</button>
                                    <a href="{{ route('workarea.contain') }}" class="btn btn-primary waves-effect waves-light" style="color:white">Work Area Contain</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element">
                        @csrf
                        <thead class="table-light">
                            <tr>
                                <th>Action</th>
                                <th>Id</th>
                                <th>Work Name</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var workArea = "{{ route('work.area.save') }}";
    var deleteWorkarea = "{{ route('work.area.delete') }}";
    var ajaxURLGetworkarea = "{{ route('work.area.ajax') }}";
    var ajaxURLWorkAreaDetail = "{{ route('work.area.Detail') }}";
    var csrfToken = $("[name=_token]").val();

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        }

        $('#Formworkarea').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function workAreaDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteWorkarea + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function showRequest(formData, jqForm, options) {
        showLoader();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();
        
        if (responseText['status'] == 1) {
            resetInputForm();

            $('#datatable').DataTable().ajax.reload(null, false);
            
            $("#btnWorkArea").html("Add");

            toastr["success"](responseText['msg']);

        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        }
    }

    function resetInputForm() {
        $('#Formworkarea').trigger("reset");
        $("#Formworkarea").removeClass('was-validated');
        $('#work_area_id').val(0);
    }

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{
            "bSortable": true,
            "aTargets": []
        }],
        "order": [[1, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 100},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetworkarea,
            "type": "POST",
            "data": {"_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "action","bSortable": false},
            {"mData": "id"},
            {"mData": "workname"},
        ]
    });

    function editView(id) {
        resetInputForm();

        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });

        $.ajax({
            type: 'GET',
            url: ajaxURLWorkAreaDetail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $("#work_area_id").val(resultData['data']['id']);
                   
                    var workname = resultData['data']['workname'];
                    worknameIds = workname.split(',');

                    worknameIds.forEach(element => {
                        if (element == 'General Insurance Products Sales') {
                            $("#work_area_name_1").prop("checked", true);
                        }
                        if (element == 'Life Insurance Products Sales') {
                            $("#work_area_name_2").prop("checked", true);
                        }
                        if (element == 'Insurance Consultant') {
                            $("#work_area_name_3").prop("checked", true);
                        }
                        if (element == 'Financial Planning & Consultant') {
                            $("#work_area_name_4").prop("checked", true);
                        }
                    });
                }
                $("#btnWorkArea").html("Update");
            }
        });
    }
</script>
@endsection