@extends('layouts.app')

@section('title', 'Account Edit')

@section('content')
    <!-- [ page-header ] start -->
    <form id="updateAccountForm" method="POST" action="{{ route('account.update', $account->id) }}">
        @csrf
        @method('PUT')
        <div class="page-header">
            <div class="page-header-left d-flex align-items-center">
                <div class="page-header-title">
                    <h5 class="m-b-10">Account</h5>
                </div>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('index') }}">Home</a></li>
                    <li class="breadcrumb-item">Edit</li>
                </ul>
            </div>
            <div class="page-header-right ms-auto">
                <div class="page-header-right-items">
                    <div class="d-flex d-md-none">
                        <a href="javascript:void(0)" class="page-header-right-close-toggle">
                            <i class="feather-arrow-left me-2"></i>
                            <span>Back</span>
                        </a>
                    </div>
                    <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                        <!-- <a href="javascript:void(0);" class="btn btn-light-brand successAlertMessage">
                            <i class="feather-layers me-2"></i>
                            <span>Save as Draft</span>
                        </a> -->
                        <a href="javascript:void(0);" class="btn btn-primary successAlertMessage"
                            onclick="document.getElementById('updateAccountForm').submit();">
                            <i class="feather-user-plus me-2"></i>
                            <span>Update Account</span>
                        </a>
                    </div>
                </div>
                <div class="d-md-none d-flex align-items-center">
                    <a href="javascript:void(0)" class="page-header-right-open-toggle">
                        <i class="feather-align-right fs-20"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="main-content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card border-top-0">
                        <div class="card-header p-0">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs flex-wrap w-100 text-center customers-nav-tabs" id="myTab"
                                role="tablist">
                                <li class="nav-item flex-fill border-top" role="presentation">
                                    <a href="javascript:void(0);" class="nav-link active" data-bs-toggle="tab"
                                        data-bs-target="#profileTab" role="tab">Profile</a>
                                </li>
                                <li class="nav-item flex-fill border-top" role="presentation">
                                    <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#billingTab" role="tab">Billing Details</a>
                                </li>
                                <li class="nav-item flex-fill border-top" role="presentation">
                                    <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#subscriptionTab" role="tab">Payment Details</a>
                                </li>
                                {{-- <li class="nav-item flex-fill border-top" role="presentation">
                                            <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                                data-bs-target="#notificationsTab" role="tab">Notifications</a>
                                        </li>
                                        <li class="nav-item flex-fill border-top" role="presentation">
                                            <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                                data-bs-target="#connectionTab" role="tab">Connection</a>
                                        </li> --}}
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="profileTab" role="tabpanel">
                                <div class="card-body personal-info">
                                    <div class="mb-4 d-flex align-items-center justify-content-between">
                                        <h5 class="fw-bold mb-0 me-4">
                                            <span class="d-block mb-2">Account Information:</span>
                                        </h5>
                                    </div>
                                    {{-- <div class="row mb-4 align-items-center">
                                                <div class="col-lg-4">
                                                    <label class="fw-semibold">Avatar: </label>
                                                </div>
                                                <div class="col-lg-8">
                                                    <div class="mb-4 mb-md-0 d-flex gap-4 your-brand">
                                                        <div
                                                            class="wd-100 ht-100 position-relative overflow-hidden border border-gray-2 rounded">
                                                            <img src="assets/images/avatar/1.png"
                                                                class="upload-pic img-fluid rounded h-100 w-100"
                                                                alt="">
                                                            <div
                                                                class="position-absolute start-50 top-50 end-0 bottom-0 translate-middle h-100 w-100 hstack align-items-center justify-content-center c-pointer upload-button">
                                                                <i class="feather feather-camera"
                                                                    aria-hidden="true"></i>
                                                            </div>
                                                            <input class="file-upload" type="file"
                                                                accept="image/*">
                                                        </div>
                                                        <div class="d-flex flex-column gap-1">
                                                            <div class="fs-11 text-gray-500 mt-2"># Upload your prifile
                                                            </div>
                                                            <div class="fs-11 text-gray-500"># Avatar size 150x150
                                                            </div>
                                                            <div class="fs-11 text-gray-500"># Max upload size 2mb
                                                            </div>
                                                            <div class="fs-11 text-gray-500"># Allowed file types: png,
                                                                jpg, jpeg</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> --}}
                                    <div class="row">

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Contact:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="primary_contact"
                                                    id="primary-contact-dropdown">
                                                    <option value="">Select Contact</option>
                                                    @foreach ($contacts as $contact)
                                                        <option value="{{ $contact->id }}"
                                                            {{ old('primary_contact', $account->primary_contact_id) == $contact->id ? 'selected' : '' }}>
                                                            {{ $contact->first_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-6 mb-2"><label class="fw-semibold">Additional Contacts:</label></div>
                                            <div class="col-lg-12">
                                                @php
                                                    $selectedContacts = old('contact_ids', $account->contacts->pluck('id')->all());
                                                @endphp
                                                <select class="form-control" name="contact_ids[]" multiple size="5">
                                                    @foreach ($contacts as $contact)
                                                        <option value="{{ $contact->id }}" @selected(in_array($contact->id, $selectedContacts))>
                                                            {{ trim($contact->first_name.' '.$contact->last_name) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="text-muted">Use Ctrl/Cmd to select multiple contacts.</small>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2"><label class="fw-semibold">Parent Account:</label></div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="parent_account_id">
                                                    <option value="">No Parent Account</option>
                                                    @foreach ($accounts->where('id', '!=', $account->id) as $parent)
                                                        <option value="{{ $parent->id }}" @selected(old('parent_account_id', $account->parent_account_id) == $parent->id)>
                                                            {{ $parent->account_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Contact Owner:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="contact_owner" id="contact-owner-dropdown">
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->id }}"
                                                            {{ old('contact_owner', $account->contact_owner_id) == $user->id ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>



                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Account Type:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="account_type" id="account-type-dropdown">
                                                    <option value="">Select Account Type</option>
                                                    <option value="Individual"
                                                        {{ old('account_type', $account->account_type) == 'Individual' ? 'selected' : '' }}>
                                                        Individual
                                                    </option>
                                                    <option value="Business"
                                                        {{ old('account_type', $account->account_type) == 'Business' ? 'selected' : '' }}>
                                                        Business
                                                    </option>
                                                    <option value="Non-Profit"
                                                        {{ old('account_type', $account->account_type) == 'Non-Profit' ? 'selected' : '' }}>
                                                        Non-Profit
                                                    </option>
                                                    <option value="Government"
                                                        {{ old('account_type', $account->account_type) == 'Government' ? 'selected' : '' }}>
                                                        Government
                                                    </option>
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Account Type: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="account_type"
                                                    id="account-type-dropdown">
                                                    <option value="">Select Account Type</option>
                                                    <option value="Individual"
                                                        {{ old('account_type', $account->account_type) == 'Individual' ? 'selected' : '' }}>
                                                        Individual</option>
                                                    <option value="Business"
                                                        {{ old('account_type', $account->account_type) == 'Business' ? 'selected' : '' }}>
                                                        Business</option>
                                                    <option value="Non-Profit"
                                                        {{ old('account_type', $account->account_type) == 'Non-Profit' ? 'selected' : '' }}>
                                                        Non-Profit</option>
                                                    <option value="Government"
                                                        {{ old('account_type', $account->account_type) == 'Government' ? 'selected' : '' }}>
                                                        Government</option>
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="accountNameInput" class="fw-semibold">Account
                                                    Name:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-briefcase"></i></div>
                                                    <input type="text" class="form-control" name="account_name"
                                                        value="{{ $account->account_name }}" id="accountNameInput"
                                                        placeholder="Account Name">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="accountNumberInput" class="fw-semibold">Account
                                                    Number:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-hash"></i>
                                                    </div>
                                                    <input type="text" class="form-control" name="account_number"
                                                        value="{{ $account->account_number }}" id="accountNumberInput"
                                                        placeholder="Account Number">
                                                </div>
                                            </div>
                                        </div>


                                        <div id="phoneContainer" class="col-md-6 mb-4">
                                            <div class="col-lg-4 mb-2">
                                                <label for="phoneInput" class="fw-semibold">Phone: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                @foreach ($account->contactPhones as $phone)
                                                    <div class="row align-items-center mb-2 phone-row">
                                                        <div class="col-md-12">
                                                            <div class="input-group">
                                                                <div class="input-group-text">
                                                                    <i class="feather-phone"></i>
                                                                </div>
                                                                <select class="form-control"
                                                                    style="width: 120px !important; min-width: 120px !important; max-width: 80px !important; padding-left: 10 !important; display: inline-block;"
                                                                    name="phone_types[]">
                                                                    <option value="1"
                                                                        {{ $phone->phone_type_id == 1 ? 'selected' : '' }}>
                                                                        Mobile</option>
                                                                    <option value="2"
                                                                        {{ $phone->phone_type_id == 2 ? 'selected' : '' }}>
                                                                        Home</option>
                                                                    <option value="3"
                                                                        {{ $phone->phone_type_id == 3 ? 'selected' : '' }}>
                                                                        Work</option>
                                                                    <option value="4"
                                                                        {{ $phone->phone_type_id == 4 ? 'selected' : '' }}>
                                                                        Other</option>
                                                                </select>
                                                                <input type="text" name="phones[]"
                                                                    class="form-control" placeholder="Phone Number"
                                                                    value="{{ $phone->phone }}">
                                                                <button type="button" class="btn btn-danger"
                                                                    onclick="removePhoneField(this)">
                                                                    <i class="feather-trash-2"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                                <!-- Add new phone field button -->
                                                <div class="row align-items-center mb-2 phone-row">
                                                    <div class="col-md-12">
                                                        <div class="input-group">
                                                            <button type="button" class="btn btn-primary"
                                                                onclick="addPhoneField()">
                                                                <i class="feather-plus"></i> Add Phone
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div id="emailContainer" class="col-md-6 mb-4">
                                            <div class="col-lg-4 mb-2">
                                                <label for="mailInput" class="fw-semibold">Email: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                @foreach ($account->contactEmails as $email)
                                                    <div class="row align-items-center mb-2 email-row">
                                                        <div class="col-md-12">
                                                            <div class="input-group">
                                                                <div class="input-group-text">
                                                                    <i class="feather-mail"></i>
                                                                </div>
                                                                <select class="form-control"
                                                                    style="width: 120px !important; min-width: 120px !important; max-width: 80px !important; padding-left: 10 !important; display: inline-block;"
                                                                    name="email_types[]">
                                                                    <option value="1"
                                                                        {{ $email->email_type_id == 1 ? 'selected' : '' }}>
                                                                        Personal</option>
                                                                    <option value="2"
                                                                        {{ $email->email_type_id == 2 ? 'selected' : '' }}>
                                                                        Work</option>
                                                                    <option value="3"
                                                                        {{ $email->email_type_id == 3 ? 'selected' : '' }}>
                                                                        Other</option>
                                                                </select>
                                                                <input type="email" name="emails[]"
                                                                    class="form-control" placeholder="Email Address"
                                                                    value="{{ $email->email }}">
                                                                <button type="button" class="btn btn-danger"
                                                                    onclick="removeEmailField(this)">
                                                                    <i class="feather-trash-2"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                                <!-- Add new email field button -->
                                                <div class="row align-items-center mb-2 email-row">
                                                    <div class="col-md-12">
                                                        <div class="input-group">
                                                            <button type="button" class="btn btn-primary"
                                                                onclick="addEmailField()">
                                                                <i class="feather-plus"></i> Add Email
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="sicCodeInput" class="fw-semibold">SIC
                                                    Code:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-code"></i>
                                                    </div>
                                                    <input type="text" class="form-control"
                                                        value="{{ $account->sic_code }}" name="sic_code"
                                                        id="sicCodeInput" placeholder="SIC Code">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Industry: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="industry_id" id="industry-dropdown">
                                                    <option value=""
                                                        {{ $account->industry_id == '' ? 'selected' : '' }}>
                                                        Select
                                                        Industry</option>
                                                    <option value="1"
                                                        {{ $account->industry_id == 1 ? 'selected' : '' }}>
                                                        Technology</option>
                                                    <option value="2"
                                                        {{ $account->industry_id == 2 ? 'selected' : '' }}>
                                                        Finance
                                                    </option>
                                                    <option value="3"
                                                        {{ $account->industry_id == 3 ? 'selected' : '' }}>
                                                        Healthcare</option>
                                                    <option value="4"
                                                        {{ $account->industry_id == 4 ? 'selected' : '' }}>
                                                        Retail
                                                    </option>
                                                    <option value="5"
                                                        {{ $account->industry_id == 5 ? 'selected' : '' }}>
                                                        Manufacturing</option>
                                                    <option value="6"
                                                        {{ $account->industry_id == 6 ? 'selected' : '' }}>
                                                        Energy
                                                    </option>
                                                </select>
                                            </div>
                                        </div>


                                        <div id="socialMediaContainer" class="col-md-6 mb-4">
                                            <div class="col-lg-4 mb-2">
                                                <label for="socialMediaInput" class="fw-semibold">Social
                                                    Media:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                @foreach ($account->contactSocialMedia as $socialMedia)
                                                    <div class="row align-items-center mb-2 social-media-row">
                                                        <div class="col-md-12">
                                                            <div class="input-group">
                                                                <!-- Social Media Icon -->
                                                                <div class="input-group-text">
                                                                    @php
                                                                        $iconMapping = [
                                                                            'facebook' => 'feather-facebook',
                                                                            'twitter' => 'feather-twitter',
                                                                            'linkedin' => 'feather-linkedin',
                                                                            'instagram' => 'feather-instagram',
                                                                            'other' => 'feather-globe',
                                                                        ];

                                                                        $iconClass =
                                                                            $iconMapping[
                                                                                $socialMedia->social_media_type_id
                                                                            ] ?? 'feather-globe';
                                                                    @endphp
                                                                    <i class="{{ $iconClass }}"
                                                                        id="icon-{{ $socialMedia->social_media_type_id }}"></i>
                                                                </div>
                                                                <select class="form-control"
                                                                    style="width: 120px !important; min-width: 120px !important; max-width: 80px !important; padding-left: 10 !important; display: inline-block;"
                                                                    name="social_media_types[]"
                                                                    onchange="changeSocialMediaIcon(this)">
                                                                    <option value="facebook"
                                                                        {{ $socialMedia->social_media_type_id == 'facebook' ? 'selected' : '' }}>
                                                                        Facebook</option>
                                                                    <option value="twitter"
                                                                        {{ $socialMedia->social_media_type_id == 'twitter' ? 'selected' : '' }}>
                                                                        Twitter</option>
                                                                    <option value="linkedin"
                                                                        {{ $socialMedia->social_media_type_id == 'linkedin' ? 'selected' : '' }}>
                                                                        LinkedIn</option>
                                                                    <option value="instagram"
                                                                        {{ $socialMedia->social_media_type_id == 'instagram' ? 'selected' : '' }}>
                                                                        Instagram</option>
                                                                    <option value="other"
                                                                        {{ $socialMedia->social_media_type_id == 'other' ? 'selected' : '' }}>
                                                                        Other</option>
                                                                </select>
                                                                <!-- Social Media Handle or URL -->
                                                                <input type="text" name="social_media_values[]"
                                                                    class="form-control"
                                                                    placeholder="Social Media Handle or URL"
                                                                    value="{{ $socialMedia->value }}">
                                                                <!-- Remove Button -->
                                                                <button type="button" class="btn btn-danger"
                                                                    onclick="removeSocialMediaField(this)">
                                                                    <i class="feather-trash-2"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                                <!-- Add new social media field button -->
                                                <div class="row align-items-center mb-2 social-media-row">
                                                    <div class="col-md-12">
                                                        <div class="input-group">
                                                            <button type="button" class="btn btn-primary"
                                                                onclick="addSocialMediaField()">
                                                                <i class="feather-plus"></i> Add Social Media
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="totalRevenueInput" class="fw-semibold">Total
                                                    Revenue:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-dollar-sign"></i>
                                                    </div>
                                                    <input type="text" class="form-control"
                                                        value="{{ $account->total_revenue }}" name="total_revenue"
                                                        id="totalRevenueInput" placeholder="Total Revenue">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="ownershipInput" class="fw-semibold">Ownership:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-user-check"></i></div>
                                                    <input type="text" class="form-control"
                                                        value="{{ $account->ownership }}" name="ownership"
                                                        id="ownershipInput" placeholder="Ownership">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Originating Lead: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="originating_lead_id"
                                                    id="originating-lead-dropdown">
                                                    <option value="">Select Originating Lead</option>
                                                    @foreach ($leads as $lead)
                                                        <option value="{{ $lead->id }}"
                                                            {{ $lead->id == $account->originating_lead_id ? 'selected' : '' }}>
                                                            {{ $lead->topic }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Contact Method: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="contact_methods[]" multiple
                                                    data-select2-selector="language">
                                                    <option value="Phone"
                                                        {{ in_array('Phone', $account->contact_method) ? 'selected' : '' }}
                                                        data-language="bg-primary">Phone</option>
                                                    <option value="Email"
                                                        {{ in_array('Email', $account->contact_method) ? 'selected' : '' }}
                                                        data-language="bg-secondary">Email</option>
                                                    <option value="Social Media"
                                                        {{ in_array('Social Media', $account->contact_method) ? 'selected' : '' }}
                                                        data-language="bg-success">Social Media</option>
                                                    <option value="Postal Mail"
                                                        {{ in_array('Postal Mail', $account->contact_method) ? 'selected' : '' }}
                                                        data-language="bg-warning">Postal Mail</option>
                                                    <option value="Fax"
                                                        {{ in_array('Fax', $account->contact_method) ? 'selected' : '' }}
                                                        data-language="bg-danger">Fax</option>
                                                </select>
                                            </div>
                                        </div>







                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Languages: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="languages[]" multiple
                                                    data-select2-selector="language">
                                                    @foreach ($languages as $language)
                                                        <option value="{{ $language->id }}"
                                                            @if ($account->contactLanguages->contains('language_id', $language->id)) selected @endif
                                                            data-language="bg-primary">
                                                            {{ $language->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>




                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Rating: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <!-- Custom Dropdown for Rating -->
                                                <div class="dropdown">
                                                    <button class="btn btn-white dropdown-toggle" type="button"
                                                        id="ratingDropdown" data-bs-toggle="dropdown"
                                                        aria-expanded="false" style="border: 1px solid #ced4da;">
                                                        <!-- Display the selected rating or default text -->
                                                        {{ $account->rating ? $account->rating . ' Star' . ($account->rating > 1 ? 's' : '') : 'Select Rating' }}
                                                        <i class="fas fa-star text-warning fs-10"></i>
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="ratingDropdown">
                                                        @for ($i = 5; $i >= 1; $i--)
                                                            <li>
                                                                <a class="dropdown-item" href="#"
                                                                    data-value="{{ $i }}">
                                                                    <i class="fas fa-star text-warning"></i>
                                                                    {{ $i }}
                                                                    Star{{ $i > 1 ? 's' : '' }}
                                                                </a>
                                                            </li>
                                                        @endfor
                                                    </ul>
                                                </div>
                                                <!-- Hidden input field to store the selected rating -->
                                                <input type="hidden" name="rating" id="ratingInput"
                                                    value="{{ $account->rating }}">
                                            </div>
                                        </div>



                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Status: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="status"
                                                    data-select2-selector="status">
                                                    <option value="active" data-bg="bg-success"
                                                        {{ $account->status == 'active' ? 'selected' : '' }}>
                                                        Active
                                                    </option>
                                                    <option value="inactive" data-bg="bg-warning"
                                                        {{ $account->status == 'inactive' ? 'selected' : '' }}>
                                                        Inactive</option>
                                                    <option value="archived" data-bg="bg-danger"
                                                        {{ $account->status == 'archived' ? 'selected' : '' }}>
                                                        Declined</option>
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                            <div class="tab-pane fade" id="billingTab" role="tabpanel">
                                <div class="card-body pass-info">
                                    <div class="mb-4 d-flex align-items-center justify-content-between">
                                        <h5 class="fw-bold mb-0 me-4">
                                            <span class="d-block mb-2">Billing Address:</span>
                                            <span class="fs-12 fw-normal text-muted text-truncate-1-line">A
                                                billing address is the address associated with a payment
                                                method.</span>
                                        </h5>
                                        <a href="javascript:void(0);" class="btn btn-sm btn-light-brand">Same
                                            as
                                            Customer Info</a>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="addressInput_2" class="fw-semibold">Billing
                                                    Address
                                                    1:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-map-pin"></i>
                                                    </div>
                                                    <textarea class="form-control" name="address1" id="addressInput_2" cols="30" rows="3"
                                                        placeholder="Address">{{ old('address1', $account->billing_address_1) }}</textarea>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="addressInput_2" class="fw-semibold">Billing
                                                    Address 2:
                                                </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-map-pin"></i>
                                                    </div>
                                                    <textarea class="form-control" name="address2" id="addressInput_2" cols="30" rows="3"
                                                        placeholder="Address">{{ old('address1', $account->billing_address_2) }}</textarea>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="zipCodeInput" class="fw-semibold">Billing Zip
                                                    Code:
                                                </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-tag"></i>
                                                    </div>
                                                    <input type="number" value="{{ $account->billing_zip_code }}"
                                                        name="zipcode" class="form-control" id="zipCodeInput"
                                                        placeholder="Zip Code">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb-4 col-md-6">
                                            <div class="col-lg-4 mb-2">
                                                <label for="cityInput" class="fw-semibold">Billing
                                                    City:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-map-pin"></i></div>
                                                    <input type="text" name="city" class="form-control"
                                                        id="cityInput" placeholder="Enter City"
                                                        value="{{ $account->billing_city }}">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb-4 col-md-6">
                                            <div class="col-lg-4 mb-2">
                                                <label for="provinceInput" class="fw-semibold">Billing
                                                    Province:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-map"></i>
                                                    </div>
                                                    <input type="text" name="province" class="form-control"
                                                        id="provinceInput" placeholder="Enter Province"
                                                        value="{{ $account->billing_province }}">
                                                </div>
                                            </div>
                                        </div>



                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label class="fw-semibold">Billing Country: </label>
                                            </div>
                                            <div class="col-lg-12">
                                                <select class="form-control" name="country_id"
                                                    data-select2-selector="country">
                                                    <option value="">Select Country</option>
                                                    <option value="1" data-country="af"
                                                        {{ $account->billing_country_id == 1 ? 'selected' : '' }}>
                                                        Afghanistan</option>
                                                    <option value="2" data-country="ax"
                                                        {{ $account->billing_country_id == 2 ? 'selected' : '' }}>
                                                        Åland
                                                        Islands</option>
                                                    <option value="3" data-country="al"
                                                        {{ $account->billing_country_id == 3 ? 'selected' : '' }}>
                                                        Albania
                                                    </option>
                                                    <option value="4" data-country="dz"
                                                        {{ $account->billing_country_id == 4 ? 'selected' : '' }}>
                                                        Algeria
                                                    </option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="websiteInput" class="fw-semibold">Website:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-globe"></i>
                                                    </div>
                                                    <input type="url" class="form-control"
                                                        value="{{ $account->website }}" name="website" id="websiteInput"
                                                        placeholder="Website URL">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="faxInput" class="fw-semibold">Fax:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-printer"></i>
                                                    </div>
                                                    <input type="text" class="form-control"
                                                        value="{{ $account->fax }}" name="fax" id="faxInput"
                                                        placeholder="Fax Number">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="tab-pane fade" id="subscriptionTab" role="tabpanel">
                                <div class="alert alert-dismissible m-4 p-4 d-flex alert-soft-teal-message"
                                    role="alert">
                                    <div class="me-4 d-none d-md-block">
                                        <i class="feather feather-alert-octagon fs-1"></i>
                                    </div>
                                    <div>
                                        <p class="fw-bold mb-1 text-truncate-1-line">We need your attention!
                                        </p>
                                        <p class="fs-12 fw-medium text-truncate-1-line">Your payment was
                                            declined.
                                            To start using tools, please <strong>Add Payment Method</strong></p>
                                        <a href="javascript:void(0);"
                                            class="btn btn-sm bg-soft-teal text-teal d-inline-block">Add
                                            Payment
                                            Method</a>
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                    </div>
                                </div>
                                <div class="card-body pass-info">
                                    <div class="row">
                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="creditLimitInput" class="fw-semibold">Credit
                                                    Limit:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-credit-card"></i>
                                                    </div>
                                                    <input type="text" class="form-control" name="credit_limit"
                                                        value="{{ $account->credit_limit }}" id="creditLimitInput"
                                                        placeholder="Credit Limit">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-4 align-items-center">
                                            <div class="col-lg-4 mb-2">
                                                <label for="paymentTermsInput" class="fw-semibold">Payment
                                                    Terms:</label>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <div class="input-group-text"><i class="feather-calendar"></i>
                                                    </div>
                                                    <input type="text" class="form-control" name="payment_terms"
                                                        value="{{ $account->payment_terms }}" id="paymentTermsInput"
                                                        placeholder="Payment Terms">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- [ Main Content ] end -->
@endsection
@section('scripts')

    <script>
        function addPhoneField() {
            const newPhoneRow = `
        <div class="row align-items-center mb-2 phone-row">
            <div class="col-md-12">
                <div class="input-group">
                    <div class="input-group-text">
                        <i class="feather-phone"></i>
                    </div>
                    <select class="form-control" style="width: 120px !important; min-width: 120px !important; max-width: 80px !important; padding-left: 10 !important; display: inline-block;" name="phone_types[]">
                        <option value="1">Mobile</option>
                        <option value="2">Home</option>
                        <option value="3">Work</option>
                        <option value="4">Other</option>
                    </select>
                    <input type="text" name="phones[]" class="form-control" placeholder="Phone Number">
                    <button type="button" class="btn btn-danger" onclick="removePhoneField(this)">
                        <i class="feather-trash-2"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
            document.querySelector("#phoneContainer .col-lg-12").insertAdjacentHTML('beforeend', newPhoneRow);
        }

        function removePhoneField(button) {
            button.closest(".phone-row").remove();
        }

        function addEmailField() {
            const newEmailRow = `
        <div class="row align-items-center mb-2 email-row">
            <div class="col-md-12">
                <div class="input-group">
                    <div class="input-group-text">
                        <i class="feather-mail"></i>
                    </div>
                    <select class="form-control" style="width: 120px !important; min-width: 120px !important; max-width: 80px !important; padding-left: 10 !important; display: inline-block;" name="email_types[]">
                        <option value="1">Personal</option>
                        <option value="2">Work</option>
                        <option value="3">Other</option>
                    </select>
                    <input type="email" name="emails[]" class="form-control" placeholder="Email Address">
                    <button type="button" class="btn btn-danger" onclick="removeEmailField(this)">
                        <i class="feather-trash-2"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
            document.querySelector("#emailContainer .col-lg-12").insertAdjacentHTML('beforeend', newEmailRow);
        }

        function removeEmailField(button) {
            button.closest(".email-row").remove();
        }


        function addSocialMediaField() {
            const newSocialMediaRow = `
        <div class="row align-items-center mb-2 social-media-row">
            <div class="col-md-12">
                <div class="input-group">
                    <!-- Default Social Media Icon -->
                    <div class="input-group-text">
                        <i class="feather-facebook" id="icon-facebook"></i>
                    </div>
                    <!-- Social Media Type -->
                    <select class="form-control" style="width: 120px !important; min-width: 120px !important; max-width: 80px !important; padding-left: 10 !important; display: inline-block;" name="social_media_types[]" onchange="changeSocialMediaIcon(this)">
                        <option data-id="1" value="facebook">Facebook</option>
                        <option data-id="2" value="twitter">Twitter</option>
                        <option data-id="3" value="linkedin">LinkedIn</option>
                        <option data-id="4" value="instagram">Instagram</option>
                        <option data-id="5" value="other">Other</option>
                    </select>
                    <!-- Social Media Input -->
                    <input type="text" class="form-control" name="social_media_values[]" placeholder="Social Media Handle or URL">
                    <!-- Remove Button -->
                    <button type="button" class="btn btn-danger" onclick="removeSocialMediaField(this)">
                        <i class="feather-trash-2"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
            document.querySelector("#socialMediaContainer .col-lg-12").insertAdjacentHTML('beforeend', newSocialMediaRow);
        }

        function removeSocialMediaField(button) {
            button.closest(".social-media-row").remove();
        }

        function changeSocialMediaIcon(selectElement) {
            const selectedOption = selectElement.options[selectElement.selectedIndex];
            const selectedId = selectedOption.getAttribute('data-id'); // Get the id of the selected social media
            const iconElement = selectElement.closest('.input-group').querySelector('.input-group-text i');

            // Change the icon based on the selected id
            switch (selectedId) {
                case "1":
                    iconElement.className = "feather-facebook";
                    break;
                case "2":
                    iconElement.className = "feather-twitter";
                    break;
                case "3":
                    iconElement.className = "feather-linkedin";
                    break;
                case "4":
                    iconElement.className = "feather-instagram";
                    break;
                default:
                    iconElement.className = "feather-globe"; // Default icon for 'other'
                    break;
            }
        }
    </script>

    <script>
        $(document).ready(function() {
            $('#contact-owner-dropdown').select2({
                placeholder: "Select Owner",
                minimumResultsForSearch: 0,
                width: '100%'
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#account-type-dropdown').select2({
                placeholder: "Select Account Type",
                minimumResultsForSearch: 0,
                width: '100%'
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#primary-contact-dropdown').select2({
                placeholder: "Select Primary Contact",
                minimumResultsForSearch: 0, // Display search bar for better UX
                width: '100%' // Ensure the dropdown width matches the parent container width
            });
        });
    </script>
    <!--! END: Theme Customizer !-->
@endsection
