@inject('industry_type_helper', 'App\Helpers\IndustryTypeHelper')
@extends('organizations.layouts.default')
@section('content')
    <main>
        <div class="mx-auto max-w-screen-2xl p-4 md:p-2 2xl:p-4">
            <div class="flex justify-between m-0 p-0">
                <!-- Breadcrumb Start -->
                @include('organizations.layouts.partials.breadcrumb')

            </div>
            <hr class="text-white my-3">
            <div class="flex flex-col gap-4">

                <div x-data="{ popupOpen: false }"
                    class="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 pb-5">
                        <div
                            class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                            <div class="border-b border-stroke p-2 px-2 dark:border-strokedark">
                                <div class="flex justify-between text-xl font-semibold text-black dark:text-white">
                                    <a href="#"><i class="bi bi-info-circle-fill"></i> Working Areas</a>
                                    </span>

                                    <span>
                                        <a href="#" @click="popupOpen = true"><i class="bi bi-pencil-fill"></i></a>
                                    </span>

                                </div>
                            </div>
                            <div class="px-5.5 pb-6 pt-4">
                                <div class="flex flex-col gap-2  font-medium">
                                    @php
                                        $selectedAreas = [];
                                    @endphp
                                    @if ($resWorkingAreas->count() > 0)
                                        @foreach ($resWorkingAreas as $recArea)
                                            @php
                                                $selectedAreas[] = $recArea->id;
                                            @endphp
                                            <span
                                                class="bg-blue-100 text-blue-800 text-base font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400">
                                                <i class="bi bi-check"></i> {{ $recArea->area_name }}</span>
                                        @endforeach
                                    @else
                                        <div class="text-blue-500"><i class="bi bi-info-circle-fill"></i> You have not set
                                            working areas yet. </div>
                                    @endif
                                    <p class="text-sm italic">Please <a href="#" @click="popupOpen = true"
                                            class=underline hover:text-blue-900"> click here </a> to update and get relevant
                                        opportunites notification.</p>
                                </div>
                            </div>

                            <!-- ===== working areas Popup Start ===== -->
                            <div>
                                <div x-show="popupOpen" x-transition
                                    class="fixed left-0 top-0 z-99999 flex h-screen w-full justify-center overflow-y-scroll bg-black/10 px-4 py-5">
                                    <div @click.outside="popupOpen = false"
                                        class="relative m-auto w-full max-w-180 rounded-sm border border-stroke bg-gray p-4 shadow-default dark:border-strokedark dark:bg-meta-4 sm:p-8 xl:p-10">
                                        <button @click="popupOpen = false"
                                            class="absolute right-1 top-1 sm:right-5 sm:top-5">
                                            <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M11.8913 9.99599L19.5043 2.38635C20.032 1.85888 20.032 1.02306 19.5043 0.495589C18.9768 -0.0317329 18.141 -0.0317329 17.6135 0.495589L10.0001 8.10559L2.38673 0.495589C1.85917 -0.0317329 1.02343 -0.0317329 0.495873 0.495589C-0.0318274 1.02306 -0.0318274 1.85888 0.495873 2.38635L8.10887 9.99599L0.495873 17.6056C-0.0318274 18.1331 -0.0318274 18.9689 0.495873 19.4964C0.717307 19.7177 1.05898 19.9001 1.4413 19.9001C1.75372 19.9001 2.13282 19.7971 2.40606 19.4771L10.0001 11.8864L17.6135 19.4964C17.8349 19.7177 18.1766 19.9001 18.5589 19.9001C18.8724 19.9001 19.2531 19.7964 19.5265 19.4737C20.0319 18.9452 20.0245 18.1256 19.5043 17.6056L11.8913 9.99599Z"
                                                    fill="" />
                                            </svg>
                                        </button>

                                        <form action="#" id="myFormWorkingAreas">
                                            @csrf
                                            <div class="mb-1">
                                                <div class="mb-2">
                                                    <p class="text-xl font-bold text-black">Working Areas</p>
                                                    <p>Please set maximum 3 working areas best suited for your organization.
                                                    </p>
                                                    <div id="js-message" class="italic">Selected Areas : @php
                                                        echo count($selectedAreas);
                                                    @endphp
                                                    </div>
                                                    <div id="failed-alert"
                                                        class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative hidden"
                                                        role="alert">
                                                    </div>
                                                    <div id="success-alert"
                                                        class="items-center p-4 mb-4 text-green-900 rounded-lg bg-green-100 dark:bg-gray-800 dark:text-green-400 hidden"
                                                        role="alert">
                                                    </div>
                                                </div>

                                                <div class="overflow-scroll max-h-300">
                                                    <div class="flex flex-col gap-2 bg-white p-4">
                                                        @foreach ($resAllAreas as $recArea)
                                                            @php
                                                                $css = in_array($recArea->id, $selectedAreas)
                                                                    ? 'text-blue-800 font-bold'
                                                                    : '';
                                                            @endphp
                                                            <div class="flex items-center gap-1">
                                                                <input type="checkbox" name="selectedAreas[]"
                                                                    onclick="countCheckedCheckboxes()"
                                                                    value="{{ $recArea->id }}" class="checkbox"
                                                                    {{ $css != '' ? 'checked' : '' }}
                                                                    id={{ 'working_' . $recArea->id }} />
                                                                <div
                                                                    class="w-full hover:scale-10 hover:font-bold hover:text-blue-600 hover:underline">
                                                                    <label for="{{ 'working_' . $recArea->id }}"
                                                                        class="hover:cursor-pointer {{ $css }}">
                                                                        {{ $recArea->area_name }}</label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <div class="pt-4">
                                                    <input onclick="submitForm()" type="button" id='btn-frm-submit'
                                                        name="submit" value="Submit"
                                                        class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- ===== working areas Popup End ===== -->

                        </div>

                        <div
                            class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                            <div class="border-b border-stroke p-4 px-7.5 dark:border-strokedark">
                                <h4 class="text-xl font-semibold text-black dark:text-white">
                                    <a href="#">Account Type</a>
                                </h4>
                            </div>
                            <div class="px-7.5 pb-9 pt-6">
                                <form id="frmAcType" action="">
                                    @csrf
                                    <ul>
                                        <li> <input type="checkbox" id="iambuyer" {{ $iamBuyer == 1 ? 'checked' : '' }}
                                                class="checkboxAcType" name="iambuyer" value="1" /> <label
                                                for="iambuyer" class="cursor-pointer font-bold black-text text-lg">We
                                                procure goods and services</label>
                                        </li>
                                        <li> <input type="checkbox" {{ $iamProvider == 1 ? 'checked' : '' }}
                                                id="iamprovider" class="checkboxAcType" name="iamprovider" value="1" />
                                            <label for="iamprovider" class="cursor-pointer font-bold black-text text-lg"> We
                                                provide goods and services </label>
                                        </li>
                                    </ul>
                                    <div class="flex justify-end">
                                        <input onclick="submitForm2()" type="button" id='btn-frm-submit' name="button"
                                            value="Apply"
                                            class="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90" />
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div
                            class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                            <div class="border-b border-stroke p-4 px-7.5 dark:border-strokedark">
                                <h4 class="text-xl font-semibold text-black dark:text-white">
                                    <a href="#">Account Status</a>
                                </h4>
                            </div>
                            <div class="p-4">
                                @if ($org->verification_at)
                                    <div class="flex flex-col gap-2">
                                        <p class="font-medium text-green-500">
                                            <i class="bi bi-check-circle me-2"></i> Account verified.
                                        </p>
                                        <p>Verified at: {{ $org->verification_at->format('Y M d') }}</p>
                                        <p>Document Type:
                                            {{ config('dropdown.org_verification_docs.' . $org->verification_doc_type) }}
                                        </p>
                                        <p><img id='preview_img' class="object-cover rounded-md"
                                                src="{{ $org->verification_document ? asset('medias/organization-pan/' . $org->verification_document) : asset('images/task/task-01.jpg') }}"
                                                alt="Current file" width="100px" /></p>
                                    @else
                                        @if ($org->verification_request_at && $org->verification_at == null)
                                            <p class="font-medium text-yellow-500">
                                                <i class="bi bi-info-circle-fill me-2"></i>Under verification process.
                                            </p>
                                    </div>
                                @else
                                    <p class="font-medium text-red-500">
                                        <i class="bi bi-info-circle-fill me-2"></i>Account not verified.
                                    </p>
                                @endif
                                <div class="mt-2">
                                    <form action="{{ route('organization.org-profile.verifyPan') }}" method="post"
                                        enctype="multipart/form-data">
                                        {{ ym_select([
                                            'label' => 'Select Document Type',
                                            'name' => 'verification_doc_type',
                                            'required' => true,
                                            'options' => config('dropdown.org_verification_docs'),
                                            'value' => $org->verification_doc_type,
                                            'class' =>
                                                'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                        ]) }}

                                        @csrf
                                        <div class="flex items-center space-x-6">
                                            <div class="shrink-0">
                                                <img id='preview_img' class="object-cover rounded-md"
                                                    src="{{ $org->verification_document ? asset($org->verification_document) : asset('images/task/task-01.jpg') }}"
                                                    alt="Current file" width="100px" />
                                            </div>

                                            <label class="block">
                                                <input type="file" name="verification_document" id="fileInput"
                                                    accept="image/*"
                                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4  file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100" />
                                                @error('verification_document')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </label>
                                        </div>
                                        <div class="flex justify-end">
                                            <button type="submit"
                                                class="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90">
                                                {{ $org->verification_document ? 'Update' : 'Submit' }}</button>
                                        </div>
                                    </form>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                @php
                    if ($errors && count($errors) > 0) {
                        $orgProfileView = 'false';
                        $orgProfileEdit = 'true';
                    } else {
                        $orgProfileView = 'true';
                        $orgProfileEdit = 'false';
                    }
                @endphp
                <div class="grid grid-cols-5 gap-8 mt-4" x-data="{ orgProfileView: {{ $orgProfileView }}, orgProfileEdit: {{ $orgProfileEdit }} }">
                    <div id="org-view-block" class="col-span-5 xl:col-span-3">
                        <div
                            class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                            <div class="border-b border-stroke px-7 py-4 dark:border-strokedark">
                                <div class="font-medium text-black dark:text-white flex justify-between">
                                    Organization Information <a href="#"
                                        x-on:click="orgProfileEdit = !orgProfileEdit, orgProfileView= !orgProfileView">Edit
                                        <i class="bi bi-pencil-fill"></i></a>
                                </div>
                            </div>
                            <div class="p-7" x-show="orgProfileView">
                                <div class="mb-2 flex flex-col gap-5.5 sm:flex-row">
                                    <div class="w-full sm:w-1/2 font-semibold">Company/Firm/Individual</div>
                                    <div class="w-full sm:w-1/2 font-semibold">Contact Person</div>
                                </div>
                                <div class="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                                    <div class="w-full sm:w-1/2">
                                        <div class="flex flex-col gap-2">
                                            <span>Org Type :
                                                {{ config('dropdown.organization_types.' . $org->type) }}</span>
                                            <span>Industry Type : {{ $org->industryType->type_name }}</span>
                                            <span>Name : {{ $org->name }}</span>
                                            <span>VAT/PAN : {{ $org->vat_number }}</span>
                                            <span>Business Regd. No. : {{ $org->business_regd_no }}</span>
                                            <div>Phone : {{ $org->phone }}</div>
                                            <div>Email : {{ $org->email }}</div>
                                            <div>Website : {{ $org->website }}</div>
                                            <div>Address : {{ $org->district?->english_name }} {{ $org->address_details }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-full sm:w-1/2">
                                        <div class="flex flex-col gap-2">
                                            <span>Name : {{ $org->contact_person_name }}</span>
                                            <span>Email : {{ $org->contact_person_email }}</span>
                                            <span>Phone : {{ $org->contact_person_phone }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <p class="font-semibold">About Company</p>
                                    {!! $org->about_organization !!}
                                </div>

                            </div>
                            <div class="p-7" x-show="orgProfileEdit">
                                <form action="{{ route('organization.org-profile.update', $org->id) }}" method="POST">
                                    @method('PUT')
                                    @csrf
                                    <div class="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'name',
                                                'required' => true,
                                                'label' => 'Name',
                                                'value' => $org->name,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>

                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'phone',
                                                'required' => true,
                                                'label' => 'Phone',
                                                'value' => $org->phone,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                    </div>
                                    <div class="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_select([
                                                'type' => 'text',
                                                'name' => 'district_id',
                                                'id' => 'dist',
                                                'required' => true,
                                                'label' => 'Select District',
                                                'options' => $districts,
                                                'value' => $org->district_id,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>

                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'address_details',
                                                'required' => true,
                                                'label' => 'Address Details',
                                                'value' => $org->address_details,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                    </div>

                                    <div class="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'email',
                                                'name' => 'email',
                                                'required' => true,
                                                'label' => 'Email',
                                                'value' => $org->email,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_select([
                                                'label' => 'Select Employee Size',
                                                'name' => 'employee_size',
                                                'required' => true,
                                                'options' => config('dropdown.employee_size'),
                                                'value' => $org->employee_size,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                    </div>
                                    <div class="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_select([
                                                'label' => 'Select Organization Type',
                                                'name' => 'type',
                                                'options' => config('dropdown.organization_types'),
                                                'value' => $org->type,
                                                'required' => true,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_select([
                                                'label' => 'Select Industry Type',
                                                'name' => 'industry_type_id',
                                                'options' => $industry_type_helper->dropdown(),
                                                'value' => $org->industry_type_id,
                                                'required' => true,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>

                                    </div>

                                    <div class="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'vat_number',
                                                'required' => true,
                                                'label' => 'VAT/PAN',
                                                'value' => $org->vat_number,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'business_regd_no',
                                                'label' => 'Registration Number',
                                                'value' => $org->business_regd_no,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                    </div>
                                    <div class="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'contact_person_name',
                                                'label' => 'Contact Person Name',
                                                'value' => $org->contact_person_name,
                                                'required' => true,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'contact_person_phone',
                                                'label' => 'Contact Person Phone',
                                                'value' => $org->contact_person_phone,
                                                'required' => true,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                    </div>
                                    <div class="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'contact_person_email',
                                                'label' => 'Contact Person Email',
                                                'value' => $org->contact_person_email,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'label' => 'Organization Established On',
                                                'type' => 'text',
                                                'name' => 'org_working_since',
                                                'placeholder' => 'eg; 1997 AD',
                                                'value' => $org->org_working_since,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                        <div class="w-full sm:w-1/2">
                                            {{ ym_input([
                                                'label' => 'Organization Website',
                                                'type' => 'text',
                                                'name' => 'website',
                                                'placeholder' => 'Website URL',
                                                'value' => $org->website,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                    </div>
                                    {{ ym_textarea([
                                        'label' => 'About Organization',
                                        'name' => 'about_organization',
                                        'value' => $org->about_organization,
                                        'placeholder' => 'Write about your organization',
                                        'class' =>
                                            'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                        'attributes' => [
                                            'rows' => 6,
                                        ],
                                    ]) }}

                                    <div class="flex justify-end gap-4.5">
                                        <button
                                            class="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90"
                                            type="submit">
                                            Save
                                        </button>
                                        <button
                                            class="flex justify-center rounded bg-graydark px-6 py-2 font-medium text-gray hover:bg-opacity-90"
                                            type="button" x-on:click="orgProfileEdit = false, orgProfileView=true">
                                            Cancel
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div x-show="open" id="org-edit-block" class="col-span-5 xl:col-span-2">
                        <div
                            class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                            <div class="border-b border-stroke px-7 py-4 dark:border-strokedark">
                                <h3 class="font-medium text-black dark:text-white">
                                    More Information
                                </h3>
                            </div>
                            <div class="p-7">
                                <form action="{{ route('organization.org-profile.moreInfo') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="mb-4">
                                        <label class="font-semibold text-black dark:text-white"
                                            for="Username">Organization
                                            Logo</label>
                                        <div class="flex items-center space-x-6">
                                            <div class="shrink-0">
                                                <img id="preview_logo" width="100px"
                                                    src="{{ $org->org_logo ? asset('medias/organization-logo/' . $org->org_logo) : asset('images/task/task-01.jpg') }}"
                                                    alt="Current file" />
                                            </div>

                                            <label class="block">
                                                <input type="file" name="org_logo" id="logoInput" accept="image/*"
                                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4  file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100" />
                                                @error('org_logo')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <p class="font-semibold mb-2">Organization Banner <span class="text-xs">[Prefred
                                                size 400px X 120px]</span></p>
                                        <div class="flex flex-col items-center space-x-6">
                                            <div>
                                                <img id="preview_banner" class="object-cover rounded"
                                                    src="{{ $org->org_banner ? asset('medias/organization-banner/' . $org->org_banner) : asset('images/task/task-01.jpg') }}"
                                                    alt="Current file" />
                                            </div>

                                            <label class="block m-4">
                                                <input type="file" name="org_banner" id="bannerInput"
                                                    accept="image/*"
                                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4  file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100" />
                                                @error('org_banner')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </label>
                                        </div>
                                    </div>
                                    <div class="hidden">
                                        <div class="mb-3">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'org_subdomain',
                                                'label' => 'Organization Subdomain',
                                                'value' => $org->org_subdomain,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                        <div class="mb-3">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'org_api_private_key',
                                                'label' => 'Organization Api Private Key',
                                                'value' => $org->org_api_private_key,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                        <div class="mb-3">
                                            {{ ym_input([
                                                'type' => 'text',
                                                'name' => 'org_api_public_key',
                                                'label' => 'Organization Api Public Key',
                                                'value' => $org->org_api_public_key,
                                                'class' =>
                                                    'w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 font-medium text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary',
                                            ]) }}
                                        </div>
                                    </div>

                                    <div class="flex justify-end gap-4.5">
                                        <button
                                            class="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90"
                                            type="submit">
                                            Save
                                        </button>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        function countCheckedCheckboxes() {
            const checkboxes = document.querySelectorAll('.checkbox');
            const checkedCount = Array.from(checkboxes).filter(checkbox => checkbox.checked).length;
            if (checkedCount > 3) {
                document.getElementById('js-message').style.color = 'red'
            } else {
                document.getElementById('js-message').style.color = 'green'
            }
            document.getElementById('js-message').innerText = `Selected Areas: ${checkedCount}`;
            return checkedCount;
        }
    </script>
    <script>
        function submitForm() {
            const count = countCheckedCheckboxes();
            if (count > 0) {
                const formId = 'myFormWorkingAreas'
                const form = document.getElementById(formId);
                const formData = new FormData(form);
                const response = ymPostFormData('{{ url('organization/store-working-areas') }}', formId, true);
            }
        }

        function submitForm2() {
            const checkboxes = document.querySelectorAll('.checkboxAcType');
            const checkedCount = Array.from(checkboxes).filter(checkbox => checkbox.checked).length;
            if (checkedCount == 0) {
                alert('Please select at least one account type')
                return;
            }
            const formId = 'frmAcType'
            const form = document.getElementById(formId);
            const formData = new FormData(form);
            const response = ymPostFormData('{{ url('organization/update-ac-type') }}', formId, true);
            alert('Account Type Updated Successfully!!!');
        }
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var loadFile = function(event, previewId) {
                var input = event.target;
                var file = input.files[0];
                var type = file.type;

                var imgOutput = document.getElementById(previewId);

                if (type.startsWith("image/")) {
                    if (imgOutput) {
                        imgOutput.style.display = "block";
                        imgOutput.src = URL.createObjectURL(file);
                        imgOutput.onload = function() {
                            URL.revokeObjectURL(imgOutput.src);
                        };
                    }
                } else {
                    alert("Please upload an image file.");
                    input.value = ''; // Reset the file input
                }
            };

            // Attach the loadFile function to the file inputs
            var logoInput = document.getElementById("logoInput");
            if (logoInput) {
                logoInput.addEventListener("change", function(event) {
                    loadFile(event, "preview_logo");
                });
            }

            var bannerInput = document.getElementById("bannerInput");
            if (bannerInput) {
                bannerInput.addEventListener("change", function(event) {
                    loadFile(event, "preview_banner");
                });
            }
        });
    </script>
@endsection