@extends('admin.layout.master')
@section('title', 'Set Up Report Layout')
@section('content')
    <style>
        label {
            font-size: 13px
        }

        .table th,
        .table td {
            padding: 0rem;
            padding-right: 0.35rem;
            padding-left: 0.35rem;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            border-top: 1px solid #2c7f6f;
            border-bottom: 1px solid #e2e2e2;
            border-left: 1px solid #2c7f6f;
            border-right: 1px solid #2c7f6f;
            background: none !important;
            color: #2c7f6f;
        }

        .nav-link:hover {
            border-bottom: #2c7f6f !important;
        }

        a.nav-link.active:hover {
            border-bottom: #e2e2e2 !important;
        }

        a.nav-link {
            color: #9e9e9e;
        }

        .nav-tabs {
            border-bottom: 1px solid #2c7f6f;
        }

        .gj-datepicker-bootstrap [role=right-icon] button .gj-icon,
        .gj-datepicker-bootstrap [role=right-icon] button .material-icons {
            top: 4px;
        }

        table{
            width:100% !important
        }
         table,
        tr,
        th,
        td {
            border: 1px solid black;
        }
        .select2-container{
            width:100% !important;
        }

    </style>

    <div class="card sina-card">
        <div class="card-header card-header-s">
            <h4>Setup Report Layout</h4>
        </div>
        <div class="card-body">
            <form action="{{ route('layout.setup-report-layout-store') }}" method="POST">
                <div class="row">
                    @csrf
                    <div class="col-md-12">
                        <div class="row mt-3 mb-3">
                            <div class="col-6">
                                <h5 class="text-bold card-title"></h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Report Type</label>
                                    <select class="form-control select2" id="reportType" name="report_type">
                                        <option value="1" {{ $type == 1 ? 'selected' : '' }}>Income State</option>
                                        <option value="2" {{ $type == 2 ? 'selected' : '' }}>Balance Sheet</option>
                                        <option value="3" {{ $type == 3 ? 'selected' : '' }}>COGS Sheet</option>
                                        <option value="4" {{ $type == 4 ? 'selected' : '' }}>Fixed Asset Statement</option>
                                        <option value="5" {{ $type == 5 ? 'selected' : '' }}>Capital State</option>
                                        <option value="11" {{ $type == 11 ? 'selected' : '' }}>Custom Report Api</option>
                                        <option value="10" {{ $type == 10 ? 'selected' : '' }}>Break Down 1</option>
                                        <option value="12" {{ $type == 12 ? 'selected' : '' }}>Break Down 2</option>
                                        <option value="13" {{ $type == 13 ? 'selected' : '' }}>Break Down 3</option>
                                        <option value="14" {{ $type == 14 ? 'selected' : '' }}>Break Down 4</option>
                                        <option value="15" {{ $type == 15 ? 'selected' : '' }}>Break Down 5</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 mt-4">
                                <div class="form-group">
                                    <button type="button" onclick="search()" class="btn btn-success btn-sm">Search </button>
                                    <a href="{{ route('layout.setup-report-layout') }}" type="button" class="btn btn-warning btn-sm">Refresh</a>
                                    <button type="button" onclick="install_from_warehouse()" class="btn btn-success btn-sm">Install From Warehouse</button>
                                    <button type="button" onclick="checkMissingLedger()" class="btn btn-danger btn-sm">Check Missing Ledger</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" style="margin-top: 2%">
                            <p style="color:green" class="text-center">{{ $message }}</p>
                            <table class="table myTable" id="DataTable">

                            </table>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(document).ready(function() {
           initSelect2();
        });
        const initSelect2=()=>{
            jQuery("select").each(function(){
                $this = jQuery(this);
                if($this.attr('data-multi_live_serach')){
                    return;
                }
                if($this.attr('data-reorder')){
                    $this.on('select2:select', function(e){
                        var elm = e.params.data.element;
                        $elm = jQuery(elm);
                        $t = jQuery(this);
                        $t.append($elm);
                        $t.trigger('change.select2');
                    });
                }
                $this.select2();
            });
        }
        const getEditField=(field,id)=>{
            $('.'+field+id).toggle('slow');
            $('.'+field+'-text'+id).toggle('slow');
            initSelect2();
        }
        const getEditFieldAll=(id)=>{
            const fields=['title','codes','calculator_ids','amount_border'];
            fields.forEach(function(field){
                $('.'+field+id).toggle('slow');
                $('.'+field+'-text'+id).toggle('slow');
            });
            initSelect2();
        }
        const updateReportLayoutData=(id)=>{
            let link= "{{route('layout.setup-report-layout-update')}}";
            var fields=['title','css_style','show','call_back_report','status','note_text','codes','calculator_ids','ledger_code_details','data_type','operator','amount_border','use_nagative'];
            var keyVal=[];

            fields.push('sort_index');
            keyVal['report_type']=$('#reportType').val();

            if(id==0){
                link= "{{route('layout.setup-report-layout-store')}}";
                //fields.push('sort_index');
                //keyVal['report_type']=$('#reportType').val();
            }else{
                keyVal['id']=id;
            }
            for (let p = 0; p < fields.length; p++) {
                keyVal[fields[p]]=$('#'+fields[p]+id).val();
            }
            const data_param = Object.fromEntries(Object.entries(keyVal));
            const setReportData = data => {
                Swal.fire({
                    position: "center",
                    icon: "success",
                    title: "Your work has been saved",
                    showConfirmButton: false,
                    timer: 1500,
                });
                search();
            }
            ajaxCall(link,'POST',data_param, setReportData);
        }
        var row;
        const start=()=>{
            row = event.target;
        }
        const dragover=()=>{
            var e = event;
            e.preventDefault();
            etp=e.target.parentNode;
            // console.log(etp);
            let children= Array.from(etp.parentNode.children);
            if(children.indexOf(etp)>children.indexOf(row)){
                etp.after(row);
            }else{
                etp.before(row);
            }
        }
        const updateReportLayoutSortingData=()=>{
            Swal.fire({
                icon: 'success',
                title: 'Confirmation',
                html: 'Are You Sure To Sort This Layout?',
                showConfirmButton: true,
                position: 'center',
                timer: null,
            }).then(() => {
                updateReportLayoutSortingDataCall();
                search();
            });
        }
        const updateReportLayoutSortingDataCall=()=>{
            // if(confirm('Are You Sure Sort This Layout?')){
                let link= "{{route('layout.setup-report-layout-update')}}";
                var keyVal=[];
                var dataVal=[];
                var num=1000;
                $('.sorting_index').each(function(){
                        keyVal['id']=$(this).attr('data-sorting');
                        keyVal['sort_index_old']=$(this).attr('data-sorting-old');
                        keyVal['sort_index']=--num;
                        const data_param = Object.fromEntries(Object.entries(keyVal));
                        console.log(data_param,keyVal);
                        dataVal.push(data_param);
                });
                let post_data={
                    sorting_data:dataVal,
                }
                const setReportData = data => {
                    Swal.fire({
                        position: "center",
                        icon: "success",
                        title: "Your work has been saved",
                        showConfirmButton: false,
                        timer: 1500,
                    });
                    search();
                }
                ajaxCall(link,'POST',post_data, setReportData);
            // }
        }
        const install_from_warehouse=()=>{
            let report_type = $("#reportType").val();
            let link= "{{route('layout.setup-report-layout.install-from-warehouse')}}";
            const setReportData = data => {
                $("#DataTable").html(data);
            }
            ajaxCall(link,'GET',{report_type: report_type}, setReportData);
        }
        function checkMissingLedger(){
            let report_type = $("#reportType").val();
            let link= "{{route('layout.setup-report-layout.check-missing-ledger')}}";
            window.open(link+'?report_type='+report_type);
        }
    </script>
    <script src="{{ asset('/') }}accounts/custom/setup_report_layout.js"></script>
@endsection