@extends('mycompany/main')

@php
    $companyDetail = $company_details ? $company_details[0] : [];
    $companyAddress = $company_address ? $company_address : [];
@endphp

@section('mycompany-content')
    <style>
        .circle-img {
            border-radius: 50%;
            overflow: hidden;
            width: 150px;
            height: 150px;
            background-color: white;
            /* Adjust width and height as needed */
        }

        .circle-img img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
            /* Ensures image fills the container */
        }

        .ctab {
            padding: 10px 25px;
            color: gray;
            border-bottom: 1px gray solid;
            font-weight: normal;
            cursor: pointer;

            a {
                color: gray;
            }
        }

        .ctaba {
            padding: 10px 25px;
            color: white;
            border-bottom: 1px white solid;
            font-weight: bold;
            cursor: pointer;

            a {
                color: white;
            }
        }
    </style>
    <div class="row">
        <img class="object-fit-cover" src="{{ asset('assets/images/bnnr-5.jpg') }}"
            style="height: 230px; position: absolute; top: 0; left: 0; padding: 0; margin: 0; z-index: -1">

        {{-- secondary --}}
        <div class="col-lg-3" style="margin-top: 50px;">
            @if (isset(session()->get('active_company')['logo']))
                <div class="row justify-content-center mt-3">
                    <div class="col-md-auto">
                        <div class="circle-img">
                            <img class="p-3"
                                src="{{ url('https://upload.wikimedia.org/wikipedia/ms/thumb/5/5d/LOGO-SNP.png/1024px-LOGO-SNP.png') }}"
                                alt="Image">
                        </div>
                    </div>
                </div>
            @else
                <div class="row mt-3" style="margin-bottom: 30px;">
                </div>
            @endif
            <div class="row mb-1">
                <div class="col-lg-12">
                    <div class="card mb-2 py-3 px-2 bg-white"
                        style="border-left-width: 8px; border-left-color:{{ config('custom.custom.primaryColor') }}; border-left-style: solid;">
                        <div class="mx-2">
                            <div class="text-wrap fw-bold">
                                <a href="#" class="text-black">{{ session()->get('active_company')['name'] }}</a>
                            </div>
                            <div class="text-wrap text-muted">{{ session()->get('active_company')['roc_no'] }}
                            </div>
                            <div class="text-wrap">{{ session()->get('active_company')['group_company'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
            @if (isset($company_profiles) && count($company_profiles) > 0)
                <div class="row">
                    <div class="col">
                        <div class="divider text-secondary">
                            <div class="divider-text">Summary</div>
                        </div>
                    </div>
                </div>
                <div class="row mb-1">
                    <div class="col-lg-12">
                        <div class="card mb-3 py-3 px-2 bg-white"
                            style="border-right-width: 8px; border-right-color:{{ config('custom.custom.primaryColor') }}; border-right-style: solid;">
                            <div class="mx-2">
                                <div class="text-wrap fw-bold mb-3">
                                    <span
                                        style="color: {{ config('custom.custom.primaryColor') }}">{{ strtoupper('Opening Balance') }}</span>
                                </div>
                                @foreach ($company_profiles as $cpf)
                                    <div class="d-flex justify-content-between mb-2" style="font-size: 1.2rem">
                                        <div class="text-wrap text-muted">{{ $cpf->currency }}
                                        </div>
                                        <div class="text-wrap fw-bold">{{ number_format($cpf->outstanding_amount, 2) }}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- primary --}}
        <div class="col-lg-9" style="margin-top: 30px;">
            <div class="row mb-4">
                <div class="col d-flex justify-content-between">
                    <div class="d-flex flex-row">
                        <div class="{{ Str::contains(url()->current(), 'my-company/info') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('my-company/info') }}">Main Info</a>
                        </div>
                        <div class="{{ Str::contains(url()->current(), 'my-company/contact') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('my-company/contact') }}">Contact</a>
                        </div>
                        <div class="{{ Str::contains(url()->current(), 'my-company/address') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('my-company/address') }}">Address</a>
                        </div>
                        <div class="{{ Str::contains(url()->current(), 'my-company/dir_share') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('my-company/dir_share') }}">Director & Shareholder</a>
                        </div>
                        <div
                            class="{{ Str::contains(url()->current(), 'my-company/financial-partner') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('my-company/financial-partner') }}">Financial Partners</a>
                        </div>
                    </div>
                    {{-- <div class="align-self-end d-flex flex-row my-auto">
                  <div class="text-muted small my-auto me-2" id="batch-sel-count"></div>
                  <div style="width: 200px">
                      <select id="batch-act-sel" class="form-select">
                      </select>
                  </div>
              </div> --}}
                </div>
            </div>
            {{-- <div class="row d-flex justify-content-between mb-3">
                <div class="text-left"></div>
                <div class="text-right"><button type="button" class="btn btn-primary me-3" id="add_address"
                        data-pid="{{ $companyDetail['id'] }}" data-mode="add" onclick="open_myCompanyModal(this)">Add
                        New</button>
                </div>
            </div> --}}

            <div class="row">
                                <div class="col-3"></div>
                <div class="col-7">
                    <img src="{{ asset('assets/images/no-data.jpg') }}" class="text-center" alt="No Data Found"
                        height="500" width="500">
                </div>
                            </div>
        </div>
    </div>

    <script>
        function open_myCompanyModal(elem) {
            var tempInput = '';
            var tempAttach = '';
            var tempTitle = '';
            var tempsubTitle = '';
            var Address1 = '';
            var Address2 = '';
            var AddressCity = '';
            var AddressPostCode = '';
            var AddressCountry = 0;
            var AddressState = 0;
            var clientID = $('#' + $(elem).attr('id')).attr('data-pid');
            var addressID = (mode == 'edit_addressOther') ? $('#' + $(elem).attr('id')).attr('data-oid') : 0;
            var mode = $('#' + $(elem).attr('id')).attr('data-mode');
            const req1 = axios.post('{{ env('APP_URL') }}' + '/my-company/companyDetail/ajax', {
                client_id: clientID,
                mode: mode,
                address_id: addressID
            });

            blockUi();

            Promise.all(([req1]))
                .then(([res1]) => {
                    var companyDetails = (res1.data.data.company_details.length > 0) ? res1.data.data.company_details[
                        0] : [];
                    var companyAddresss = (res1.data.data.company_addresss.length > 0) ? res1.data.data
                        .company_addresss[0] : [];
                    var companyCountries = (res1.data.data.company_countries.length > 0) ? res1.data.data
                        .company_countries : [];
                    var companyStates = (res1.data.data.company_states.length > 0) ? res1.data.data.company_states : [];

                    Address1 = (mode == 'edit_addressPrimary') ? companyDetails.address1 : ((mode ==
                        'edit_addressOther') ? companyAddresss.address1 : '');
                    Address2 = (mode == 'edit_addressPrimary') ? companyDetails.address2 : ((mode ==
                        'edit_addressOther') ? companyAddresss.address2 : '');
                    AddressCity = (mode == 'edit_addressPrimary') ? companyDetails.city : ((mode ==
                        'edit_addressOther') ? companyAddresss.city : '');
                    AddressPostCode = (mode == 'edit_addressPrimary') ? companyDetails.postcode : ((mode ==
                        'edit_addressOther') ? companyAddresss.postcode : '');
                    AddressCountry = (mode == 'edit_addressPrimary') ? companyDetails.country_id : ((mode ==
                        'edit_addressOther') ? companyAddresss.country_id : '');
                    AddressState = (mode == 'edit_addressPrimary') ? companyDetails.state_id : ((mode ==
                        'edit_addressOther') ? companyAddresss.state_id : '');

                    tempInput +=
                        '<div class="col-12 col-sm-6">\
                                                                                                                                <label class="form-label" for="' +
                        mode +
                        'Addrees1">Address Line 1</label>\
                                                                                                                                <input type="text" id="' +
                        mode +
                        'addressID" name="' +
                        mode +
                        'addressID" value="' +
                        addressID +
                        '" class="form-control" hidden />\
                                                                                                                                <input type="text" id="' +
                        mode +
                        'Addrees1" name="' +
                        mode +
                        'Addrees1" class="form-control" value="' +
                        Address1 +
                        '" placeholder="Building number, unit, floor, etc." />\
                                                                                                                              </div>\
                                                                                                                              <div class="col-12 col-md-6">\
                                                                                                                                <label class="form-label" for="' +
                        mode +
                        'Postcode">Postcode</label>\
                                                                                                                                <input type="text" id="' +
                        mode +
                        'Postcode" name="' +
                        mode +
                        'Postcode" class="form-control" value="' +
                        AddressPostCode +
                        '" placeholder="50088" />\
                                                                                                                              </div>\
                                                                                                                              <div class="col-12 col-sm-6">\
                                                                                                                                <label class="form-label" for="' +
                        mode +
                        'Addrees2">Address Line 2</label>\
                                                                                                                                <input type="text" id="' +
                        mode +
                        'Addrees2" name="' +
                        mode +
                        'Addrees2" class="form-control" value="' +
                        Address2 +
                        '" placeholder="Street address" />\
                                                                                                                              </div>\
                                                                                                                              <div class="col-12 col-md-6">\
                                                                                                                                <label class="form-label" for="' +
                        mode +
                        'Country">Country</label>\
                                                                                                                                <select class="form-select select2" tabindex="0" id="' +
                        mode +
                        'Country" name="' +
                        mode +
                        'Country" onchange="change_state_input(' + "'" + mode + "'" +
                        ')">\
                                                                                                                                  <option value="-1" selected >-- Please Select --</option>';

                    if (companyCountries.length > 0) {
                        $.each(companyCountries, function(key, row) {
                            tempInput += '<option value="' + row.id + '">' + row.country + '</option>';
                        });
                    }

                    tempInput +=
                        '</select>\
                                                                                                                              </div>\
                                                                                                                              <div class="col-12 col-md-6">\
                                                                                                                                <label class="form-label" for="' +
                        mode +
                        'City">City</label>\
                                                                                                                                <input type="text" id="' +
                        mode +
                        'City" name="' +
                        mode +
                        'City" class="form-control" value="' +
                        AddressCity +
                        '" placeholder="Kuala Lumpur" />\
                                                                                                                              </div>\
                                                                                                                              <div class="col-12 col-md-6">\
                                                                                                                                <label class="form-label" for="' +
                        mode +
                        'State">State</label>\
                                                                                                                                <select class="form-select" tabindex="0" id="' +
                        mode +
                        'State" name="' +
                        mode +
                        'State">\
                                                                                                                                  <option value="-1" selected disabled>-- Please Select --</option>';

                    if (companyStates.length > 0) {
                        $.each(companyStates, function(key, row) {
                            tempInput += '<option value="' + row.id + '">' + row.state + '</option>';
                        });
                    }

                    tempInput +=
                        '</select>\
                                                                                                                              </div>';

                    if (mode == 'add') {
                        tempInput +=
                            '<div class="col-12 col-md-6">\
                                                                                                                                  <label class="switch">\
                                                                                                                                  <input type="checkbox" class="switch-input" id="' +
                            mode +
                            'addressSwitchPrimary">\
                                                                                                                                    <span id="' +
                            mode +
                            'addressSwitchPrimary2" class="switch-toggle-slider">\
                                                                                                                                      <span class="switch-on"></span>\
                                                                                                                                      <span class="switch-off"></span>\
                                                                                                                                    </span>\
                                                                                                                                    <span class="switch-label">Set as primary</span>\
                                                                                                                                  </label>\
                                                                                                                                </div>';

                        tempTitle = 'Add Company Info';
                        tempsubTitle = 'Add New Address';
                    } else {
                        tempTitle = 'Edit Company Info';
                        tempsubTitle = (mode == 'edit_addressPrimary') ? 'Edit Address Primary' : 'Edit Address Other';
                    }
                })
                .catch((error) => {
                    console.log('error');
                    console.log(error);
                })
                .finally(() => {

                    $('#editMyCompanyModal_title').html(tempTitle);
                    $('#editMyCompanyModal_sub-title').html(tempsubTitle);
                    $('#editMyCompanyModal').modal('show');
                    $('#editMyCompanyModal_content').html(tempInput);
                    $('#modeMyCompanyModal').val(mode);
                    $('#changeTypeMyCompanyModal').val('address');
                    $('#clientID').val(clientID);

                    $('#' + mode + 'Country').val((AddressCountry > 0) ? AddressCountry : '-1');
                    $('#' + mode + 'State').val((AddressState > 0) ? AddressState : '-1');

                    $(".select2").select2({
                        dropdownParent: $('.select2').parent(),
                    });

                    getMyCompanyAttachmentExist();
                    tooltip();

                    $.unblockUI();
                });
        }

        function change_state_input(mode) {
            var countryIDs = $('#' + mode + 'Country').val();
            var tempInput = '';
            const req1 = axios.post('{{ env('APP_URL') }}' + '/my-company/companyDetail/ajax', {
                country_id: countryIDs
            });

            blockUi();

            // $('#' + mode + 'State').select2('destroy');
            $('#' + mode + 'State').html('');

            Promise.all(([req1]))
                .then(([res1]) => {
                    var companyStates = (res1.data.data.company_states.length > 0) ? res1.data.data.company_states : [];
                    console.log(companyStates);

                    tempInput += '<option value="-1" selected disabled>-- Please Select --</option>';
                    if (companyStates.length > 0) {
                        $.each(companyStates, function(key, row) {
                            tempInput += '<option value="' + row.id + '">' + row.state + '</option>';
                        });
                    }
                })
                .catch((error) => {
                    console.log('error');
                    console.log(error);
                })
                .finally(() => {

                    $('#' + mode + 'State').append(tempInput);

                    // $(".select2").select2({
                    //   dropdownParent: $('.select2').parent(),
                    // });

                    $.unblockUI();
                });
        }
    </script>
@endsection