@extends('admin.layout.master')
@php
    $typeArr = [4 => 'CM', 5 => 'REGIONAL', 6 => 'ZONE'];
    $routeName = [4 => 'shop.store', 5 => 'shop.store', 6 => 'shop.store'];
    $editRouteName = [4 => 'shop.edit', 5 => 'shop.edit', 6 => 'shop.edit'];
@endphp
@section('title', $typeArr[$type])
@section('content')
    <style>
        label {
            font-size: 13px
        }

        .sm-pd-t th,
        .sm-pd-t 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;
        }
        .toggle-on, .toggle-off {
            padding: 3px 6px !important;
        }
    </style>
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <div class="col-md-6 col-12 pl-0">
                <h4>{{ $typeArr[$type] }}</h4>
            </div>
        </div>
        <div class="card-body">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs">
                @forelse ($typeArr as $k=>$shop_type)
                    <li class="nav-item">
                        <a class="nav-link {{ $type == $k ? 'active' : '' }}"
                            href="{{ route('officer.level_index', ['type' => $k]) }}">{{ $shop_type }}</a>
                    </li>

                @empty
                @endforelse
            </ul>

            <!-- Tab panes -->
            <div class="tab-content pt-0">
                {{-- Branch Tab --}}
                <div id="area" class="container-fluid tab-pane active">
                    <div class="row mt-3 mb-3">
                        <div class="col-6">
                            <h5 class="text-bold card-title">{{ $typeArr[$type] }}</h5>
                        </div>
                        <div class="col-6 text-right">
                            {{-- @if (checkAuthPermission($routeName[$type])) --}}
                            <button href="" data-toggle="modal" data-target="#modal" class="btn btn-primary btn-icon-sm">{{__('obs.add_new')}}</button>
                            {{-- @endif --}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <table id="tbl_branch" style="max-height: calc(100vh - 408px);"
                                class="table Dtable table-striped table-bordered dataTable no-footer">
                                <thead>
                                    <tr>
                                            <th>{{__('obs.name')}} ({{__('obs.english')}})</th>
                                            <th>{{__('obs.name')}} ({{__('obs.local')}})</th>
                                        @if ($type == 5)
                                            <th>CM</th>
                                        @endif
                                        @if ($type == 6)
                                            <th>Region</th>
                                            <th>CM</th>
                                            @if (active_user() == 1)
                                                <th>Group</th>
                                            @endif
                                        @endif
                                        <th class="text-center">Status</th>
                                        @if ($type == 6)
                                            <th class="text-center">
                                                <div class="text-center">
                                                    <input type="checkbox" id="is_under_process_checkall" />
                                                    <button class="btn btn-sm btn-success ml-1" onclick="selectAll('is_under_process')" style="padding: .1rem .25rem !important;">
                                                        <i class="fa fa-check" style="font-size: 12px;"></i>
                                                    </button>
                                                </div>
                                                    Is Under Process
                                            </th>
                                            <th>
                                                <div class="text-center">
                                                    <input type="checkbox" id="is_laptop_distributed_checkall" />
                                                    <button class="btn btn-sm btn-success ml-1" onclick="selectAll('is_laptop_distributed')" style="padding: .1rem .25rem !important;">
                                                        <i class="fa fa-check" style="font-size: 12px;"></i>
                                                    </button>
                                                </div>
                                                Is Laptop Distributed
                                            </th>
                                        @endif
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="b_tbody">
                                    @foreach ($shops->where('type', $type) as $shop)
                                        <tr id="b_tr{{ $shop->id }}">
                                            <td>
                                                {{ $shop->name }} <br>
                                                {{ $shop->parent_id }}-{{ $shop->id }}
                                            </td>
                                            <td>{{ $shop->name_local }}</td>
                                            @if ($type == 5)
                                                <td>{{ $shop->parent->name ?? '-' }}</td>
                                            @endif
                                            @if ($type == 6)
                                                <td>{{ $shop->parent->name ?? '-' }}</td>
                                                <td>{{ $shop->parent->parent->name ?? '-' }}</td>
                                                @if (active_user() == 1)
                                                    <td>{{ $shop->refGroup->name_eng ?? '' }}</td>
                                                @endif
                                            @endif
                                            <td class="text-center">
                                                <input id="b_status{{ $shop->id }}"
                                                    onchange="shopStatus({{ $shop->id }}, {{ $shop->status == 1 ? '2' : '1' }})"
                                                    type="checkbox" {{ $shop->status == 1 ? 'checked' : '' }}
                                                    data-toggle="toggle" data-size="sm" data-onstyle="success">
                                            </td>
                                            @if ($type == 6)
                                                <td class="text-center">
                                                    <input id="distribution_status{{ $shop->id }}" class="is_under_process_inp"
                                                        onchange="changeFieldStatus({{ $shop->id }}, 'is_under_process', {{ $shop->is_under_process == 1 ? 0 : 1 }})"
                                                        type="checkbox" {{ $shop->is_under_process == 1 ? 'checked' : '' }}
                                                        data-toggle="toggle" data-size="sm" data-onstyle="info" data-on="Yes" data-off="No">
                                                </td>
                                                <td class="text-center">
                                                    <input id="under_process_status{{ $shop->id }}" class="is_laptop_distributed_inp"
                                                        onchange="changeFieldStatus({{ $shop->id }}, 'is_laptop_distributed', {{ $shop->is_laptop_distributed == 1 ? 0 : 1 }})"
                                                        type="checkbox" {{ $shop->is_laptop_distributed == 1 ? 'checked' : '' }}
                                                        data-toggle="toggle" data-size="sm" data-onstyle="warning" data-on="Yes" data-off="No">
                                                </td>
                                            @endif
                                            <td class="text-center">
                                                <div class="btn-group btn-group-sm" role="group" aria-label="...">
                                                    @if (checkAuthPermission($editRouteName[$type]))
                                                        <button onclick="setEditDataModel({{ $shop }})"
                                                            class="btn btn-hover-shine btn-primary btn-pill">Edit</button>
                                                    @endif
                                                    @if (checkAuthPermission('api.warehouse.dms.warehouse-create') && !$shop->ref_dms_warehouse_id && $type == 6)
                                                        &nbsp;<div>
                                                            <button id="dms_wid_{{ $shop->id }}"
                                                                onclick="handleBtnDMSWarehouse({{ $shop->id }})"
                                                                class="btn btn-hover-shine btn-primary btn-pill">DMS(WAREHOUSE)</button>
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @include('inventory.forms.officer_level_form')
    @include('inventory.forms.officer_level_edit_form')
    @include('admin.global.loader')

@endsection
@section('script')
    <!-- Bootstrap Toggle JS -->
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script>
        $('.parent_id').select2();
        $('.store_table_type').select2();
        $('.ref_group_id').select2();

        function setEditDataModel(data) {
            $("#edit_modal").modal("hide");
            var str = '';
            $('#edit_id').val(data.id);
            $('#edit_name').val(data.name);
            $('#edit_name_local').val(data.name_local);
            $('#edit_rm_domain').val(data.domain);
            $('#edit_parent_id').val(data.parent_id).trigger('change');
            $('#edit_ref_group_id').val(data.ref_group_id).trigger('change');
            $("#edit_modal").modal("show");
        }

        function handleBtnDMSWarehouse(id) {
            callSweetAlert('warning', "Are You Sure?", '', 1, function() {
                $("#dms_wid_" + id).attr("disabled", true);
                ajaxCall('/dms/warehouse/store', 'post', {
                    id: id
                }, function(data) {
                    if (data.status == 200) {
                        $("#dms_wid_" + id).hide();
                    }
                    callSweetAlert('success', `<p class="text-info">${data.message}</p>`, '');
                    $("#dms_wid_" + id).attr("disabled", false);
                });
            });
        }

        function debounce(func, delay) {
            let timeout;
            return function (...args) {
                const context = this;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), delay);
            };
        }

        const changeFieldStatus = debounce(function(shop_id, column, status) {
            ajaxCall("{{ route('officer.zone_status_change') }}", 'GET', {shop_id, column, status, type: 1}, function(res) {
                $('#loader').hide();
                callSweetAlert('success', `Updated Successfully!`, '');
            });
        }, 200);

        // function changeFieldStatus(shop_id, column, status) {
        // }

        function selectAll(column) {
            const checkAll = $(`#${column}_checkall`);
            const isChecked = checkAll.prop('checked');

            if (confirm("Are you sure to change all?")) {
                ajaxCall("{{ route('officer.zone_status_change') }}", 'GET', {column, status: isChecked ? 1 : 0, type: 2}, function(res) {
                    $('#loader').hide();
                    callSweetAlert('success', `Updated Successfully!`, '');
                    location.reload();
                });
            }
        }
    </script>
@endsection