@extends('admin.layout.master')
@php
    $typeArr=[1=>__('obs.branch'),2=>__('obs.warehouses'),3=>__('obs.stores')];
    $routeName=[1=>'branch.store',2=>'warehouse.store',3=>'store.store'];
    $editRouteName=[1=>'branch.edit',2=>'warehouse.edit',3=>'store.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;
        }
        .spliter {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 >{{__('obs.company')}} {{__('obs.details')}}</h4>
        </div>
        <div class="card-body">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#branch">{{$typeArr[$type]}}</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content pt-0">
                {{-- Branch Tab --}}
                <div id="branch" class="container tab-pane active">
                    <div class="d-flex justify-content-between align-items-center mt-2 mb-3">
                        <h4 class="text-bold card-title mb-0">{{$typeArr[$type]}}</h4>

                        @if(checkAuthPermission($routeName[$type]))
                            <button href="" data-toggle="modal" data-bs-toggle="modal" data-bs-target="#modal" data-target="#modal" class="btn btn-primary btn-icon-sm">Add New</button>
                        @endif
                    </div>

                    <table id="tbl_branch"  style="max-height: calc(100vh - 408px);"  class="table Dtable cl-table table-striped table-bordered dataTable no-footer" >
                        <thead>
                            <tr>
                                <th>({{__('obs.color')}})</th>
                                <th>{{__('obs.name')}} ({{__('obs.english')}})</th>
                                <th>{{__('obs.name')}} ({{__('obs.local')}})</th>
                                <th>{{__('obs.address')}} ({{__('obs.english')}})</th>
                                <th>{{__('obs.address')}} ({{__('obs.local')}})</th>
                                <th>{{__('obs.contact')}} {{__('obs.info')}} ({{__('obs.local')}})</th>
                                <th>{{__('obs.email')}}</th>
                                <th>{{__('obs.logo')}}</th>
                                <th>{{__('obs.status')}}</th>
                                <th>{{__('obs.action')}}</th>
                            </tr>
                        </thead>
                        <tbody id="b_tbody">
                            {{-- @dd($branches) --}}
                            @foreach ($branches->where('type',$type) as $branch)
                                @php $basic_info = json_decode($branch->basic_info); @endphp
                                {{-- @dd($basic_info) --}}
                                <tr id="b_tr{{$branch->id}}">
                                    <td class="align-middle text-center" title="{{ isset($basic_info->color) ? $basic_info->color : '' }}">
                                        <div style="width: 20px; height: 20px; background-color:{{ isset($basic_info->color) ? $basic_info->color : '' }}"></div>
                                    </td>
                                    <td>{{$branch->name_eng}}</td>
                                    <td>{{$branch->name_local}}</td>
                                    <td>{{$branch->address_eng}}</td>
                                    <td>{{$branch->address_local}}</td>
                                    <td>{{$branch->contact_info}}</td>
                                    <td>{{$branch->email}}</td>
                                    <td> @if($branch->logo) <img src="{{asset('storage/'.$branch->logo)}}" style="height: 50px; width: 50px;" alt=""> @endif </td>
                                    <td class="text-center" id="b_status_td{{$branch->id}}">
                                        <input id="b_status{{$branch->id}}" onchange="branchStatus({{$branch->id}})" type="checkbox" {{($branch->status==1) ? 'checked' : ''}} data-toggle="toggle" data-size="sm" data-onstyle="success">
                                    </td>
                                    <td class="text-center">
                                        <div class="btn-group btn-group-sm" role="group" aria-label="...">
                                            @if(checkAuthPermission($editRouteName[$type]))
                                                <button onclick="setEditDataModel({{$branch}})" class="btn btn-hover-shine btn-primary btn-pill">{{__('obs.edit')}}</button>
                                            @endif
                                        </div>
                                        
                                        @if($branch->type == 2)
                                            <button type="button" onclick="syncDefaultConfig({{$branch->id}})" class="btn btn-hover-shine btn-warning btn-pill">Sync</button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


@include('admin.forms.branch_form')
@include('admin.forms.branch_edit_form')


@endsection
@section('script')
<script>
    $('.parent_id').select2();
    $('.store_table_type').select2();

    function setEditDataModel(data)
    {
        $("#edit_modal").modal("hide");
        $("#edit_appent_input_container").html("");

        var str ='';
        console.log(data);
        let basic_info=JSON.parse(data.basic_info);
        // let defaultBasicInfo=[];
        let defaultBasicInfo=['address_eng','address_local','contact_info','email','color'];
        for (const key in basic_info) {
            if(defaultBasicInfo.includes(key)){
                $('#edit_'+key).val(basic_info[key]);
            }else if(key!='logo'){
                    addBasicInfoField(key,basic_info[key],1);
            }
            // console.log(`${key}: ${basic_info[key]}`);
        }
        if(defaultBasicInfo.length==0){
            console.log('field');
            $('#edit_email').val(data.email);
            $('#edit_contact_info').val(data.contact_info);
            $('#edit_address_eng').val(data.address_eng);
            $('#edit_address_local').val(data.address_local);
            $('#edit_color').val(data.color);
        }

        $('#edit_id').val(data.id);
        $('#edit_name').val(data.name_eng);
        $('#edit_name_local').val(data.name_local);
        $('#edit_parent_id').val(data.parent_id).trigger('change');
        $('#edit_store_table_type').val(data.store_table_type).trigger('change');

        $("#edit_modal").modal("show");
    }

    function branchStatus(id) {
        ajaxCallV2(`/admin/branch-status/${id}`, 'GET', {}, (response) => {
            $('#loader').hide();
            $(`#b_status_td${id}`).html(`<input id="b_status${id}" onchange="branchStatus(${id})" type="checkbox" ${response?.status == 1 ? 'checked' : ''} data-toggle="toggle" data-size="sm" data-onstyle="success" />`);
        }, (error) => {
            $('#loader').hide();
        });
    }

    let winput=0;
    const addBasicInfoField=(k='',v='',t=0)=>{
        winput++;
        let str=`<tr>
                    <td><input type="text" name="obs_key[]" class="form-control obs_key-${winput}" placeholder="KEY" value="${k}"></td>
                    <td><input type="text" name="obs_value[]" class="form-control obs_key-${winput}" placeholder="VALUE" value="${v}"></td>
                </tr>`;
        $(str).appendTo(t?'#edit_appent_input_container':'#appent_input_container');
        // if(winput){
        //     $('#appent_table_container').show();
        // }
    }

    function syncDefaultConfig(warehouse_id = null){
        if(!confirm('Are you sure?')) return false;

        ajaxCallV2("{{ route('admin.sync_config') }}", 'POST', {'id':warehouse_id}, (response) => {
            $('#loader').hide();
            callSweetAlert('success', `<p class="text-info">${response.message}</p>`, '');
        },function(error){
            console.log(error);

            $('#loader').hide();
            if(error.responseJSON && typeof error.responseJSON.message != 'undefined'){
                callSweetAlert('error', 'Opps!', error.responseJSON.message);
                return;
            }
            callSweetAlert('warning', `<p class="text-info">${error.message}</p>`, '');
        });
    }

</script>
@endsection