@extends('admin.master')

@section('content')

@php
    /*
    |--------------------------------------------------------------------------
    | Determine Initial Active Tab
    |--------------------------------------------------------------------------
    |
    | Validation error থাকলে সংশ্লিষ্ট tab automatic open হবে।
    |
    */

    $initialTab = 'basic';

    if (
        $errors->hasAny([
            'logo',
            'favicon',
        ])
    ) {
        $initialTab = 'media';
    } elseif (
        $errors->hasAny([
            'phone',
            'email',
            'whatsapp_number',
            'address',
        ])
    ) {
        $initialTab = 'contact';
    } elseif (
        $errors->hasAny([
            'facebook_page_link',
            'messenger',
            'x_link',
            'instagram_link',
            'tiktok_link',
            'youtube_link',
        ])
    ) {
        $initialTab = 'social';
    }
@endphp

<style>
    /* =========================================================
       COMPANY SETTINGS PAGE
    ========================================================= */

    .company_settings_page {
        --company_settings_primary: #ff6b1a;
        --company_settings_primary_dark: #e7580a;
        --company_settings_primary_soft: #fff3eb;

        --company_settings_blue: #2563eb;
        --company_settings_green: #16a36f;
        --company_settings_green_soft: #eaf9f3;
        --company_settings_red: #dc3545;
        --company_settings_red_soft: #fff0f1;

        --company_settings_navy: #172033;
        --company_settings_text: #344054;
        --company_settings_muted: #7c8798;

        --company_settings_background: #f4f6f9;
        --company_settings_card: #ffffff;
        --company_settings_border: #e1e5eb;
        --company_settings_border_dark: #cdd3dc;

        --company_settings_radius_small: 8px;
        --company_settings_radius_medium: 14px;
        --company_settings_radius_large: 20px;

        width: 100%;
        min-height: calc(100vh - 60px);

        padding: 22px 14px 55px;

        color: var(--company_settings_text);

        background:
            radial-gradient(
                circle at top right,
                rgba(255, 107, 26, 0.07),
                transparent 27%
            ),
            var(--company_settings_background);
    }

    .company_settings_page *,
    .company_settings_page *::before,
    .company_settings_page *::after {
        box-sizing: border-box;
    }

    .company_settings_container {
        width: min(1400px, 100%);

        margin: 0 auto;
    }

    /* =========================================================
       PAGE HEADER
    ========================================================= */

    .company_settings_header {
        position: relative;

        margin-bottom: 20px;
        padding: 22px 24px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 20px;

        overflow: hidden;

        border: 1px solid var(--company_settings_border);
        border-radius: var(--company_settings_radius_medium);

        background:
            linear-gradient(
                135deg,
                #ffffff 0%,
                #fff9f5 100%
            );

        box-shadow:
            0 7px 24px
            rgba(23, 32, 51, 0.055);
    }

    .company_settings_header::after {
        content: "";

        position: absolute;

        top: -90px;
        right: -70px;

        width: 230px;
        height: 230px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(255, 107, 26, 0.13),
                transparent 70%
            );

        pointer-events: none;
    }

    .company_settings_header_left {
        position: relative;
        z-index: 2;

        min-width: 0;

        display: flex;
        align-items: center;

        gap: 15px;
    }

    .company_settings_header_icon {
        width: 55px;
        height: 55px;

        display: grid;
        place-items: center;

        flex: 0 0 55px;

        border-radius: 16px;

        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                var(--company_settings_primary),
                #ff9453
            );

        box-shadow:
            0 10px 22px
            rgba(255, 107, 26, 0.22);

        font-size: 22px;
    }

    .company_settings_header_text {
        min-width: 0;
    }

    .company_settings_header_eyebrow {
        display: block;

        margin-bottom: 4px;

        color: var(--company_settings_primary);

        font-size: 10px;
        font-weight: 800;
        line-height: 1.3;

        letter-spacing: 0.9px;
        text-transform: uppercase;
    }

    .company_settings_header h1 {
        margin: 0;

        color: var(--company_settings_navy);

        font-size: clamp(23px, 2.4vw, 32px);
        font-weight: 800;
        line-height: 1.2;
    }

    .company_settings_header p {
        margin: 6px 0 0;

        color: var(--company_settings_muted);

        font-size: 13px;
        line-height: 1.55;
    }

    .company_settings_header_badge {
        position: relative;
        z-index: 2;

        min-height: 38px;

        padding: 9px 13px;

        display: inline-flex;
        align-items: center;

        gap: 7px;

        flex: 0 0 auto;

        border: 1px solid #ccecdf;
        border-radius: 20px;

        color: var(--company_settings_green);

        background: var(--company_settings_green_soft);

        font-size: 11px;
        font-weight: 700;
    }

    .company_settings_header_badge i {
        font-size: 12px;
    }

    /* =========================================================
       ALERTS
    ========================================================= */

    .company_settings_alert {
        position: relative;

        margin-bottom: 18px;
        padding: 13px 48px 13px 14px;

        display: flex;
        align-items: flex-start;

        gap: 10px;

        border-radius: var(--company_settings_radius_small);

        font-size: 13px;
        line-height: 1.55;
    }

    .company_settings_alert_success {
        border: 1px solid #bfe8d6;

        color: #176b4c;

        background: var(--company_settings_green_soft);
    }

    .company_settings_alert_error {
        border: 1px solid #f2bfc4;

        color: #a02632;

        background: var(--company_settings_red_soft);
    }

    .company_settings_alert > i {
        margin-top: 2px;

        flex: 0 0 auto;

        font-size: 17px;
    }

    .company_settings_alert_content {
        min-width: 0;

        flex: 1;
    }

    .company_settings_alert_content strong {
        display: block;

        margin-bottom: 3px;

        font-weight: 800;
    }

    .company_settings_alert_content ul {
        margin: 5px 0 0;
        padding-left: 18px;
    }

    .company_settings_alert_close {
        position: absolute;

        top: 8px;
        right: 9px;

        width: 32px;
        height: 32px;

        padding: 0;

        display: grid;
        place-items: center;

        border: 0;
        border-radius: 50%;

        color: currentColor;

        background: transparent;

        cursor: pointer;

        opacity: 0.72;
    }

    .company_settings_alert_close:hover {
        background: rgba(0, 0, 0, 0.06);

        opacity: 1;
    }

    /* =========================================================
       MAIN SETTINGS CARD
    ========================================================= */

    .company_settings_card {
        overflow: hidden;

        border: 1px solid var(--company_settings_border);
        border-radius: var(--company_settings_radius_large);

        background: var(--company_settings_card);

        box-shadow:
            0 12px 38px
            rgba(23, 32, 51, 0.075);
    }

    .company_settings_form_layout {
        display: grid;

        grid-template-columns: 255px minmax(0, 1fr);

        align-items: stretch;
    }

    /* =========================================================
       TAB SIDEBAR
    ========================================================= */

    .company_settings_tabs_sidebar {
        min-width: 0;

        padding: 20px 14px;

        border-right: 1px solid var(--company_settings_border);

        background:
            linear-gradient(
                180deg,
                #fafbfc 0%,
                #f6f7f9 100%
            );
    }

    .company_settings_tabs_intro {
        margin-bottom: 16px;
        padding: 0 8px;
    }

    .company_settings_tabs_intro span {
        display: block;

        color: var(--company_settings_muted);

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

    .company_settings_tabs_intro strong {
        display: block;

        margin-top: 4px;

        color: var(--company_settings_navy);

        font-size: 15px;
        font-weight: 800;
    }

    .company_settings_tabs {
        margin: 0;
        padding: 0;

        display: grid;

        gap: 7px;

        border: 0;

        list-style: none;
    }

    .company_settings_tabs .nav-item {
        width: 100%;
    }

    .company_settings_tabs .nav-link {
        position: relative;

        width: 100%;
        min-height: 54px;

        padding: 10px 11px;

        display: grid;

        grid-template-columns: 38px minmax(0, 1fr) auto;

        align-items: center;

        gap: 10px;

        border: 1px solid transparent;
        border-radius: 10px;

        color: var(--company_settings_text);

        background: transparent;

        font-family: inherit;

        text-align: left;

        cursor: pointer;

        transition:
            color 170ms ease,
            border-color 170ms ease,
            background-color 170ms ease,
            box-shadow 170ms ease,
            transform 170ms ease;
    }

    .company_settings_tab_icon {
        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        border-radius: 10px;

        color: var(--company_settings_muted);

        background: #ffffff;

        box-shadow:
            0 3px 10px
            rgba(23, 32, 51, 0.055);

        font-size: 15px;

        transition:
            color 170ms ease,
            background-color 170ms ease;
    }

    .company_settings_tab_text {
        min-width: 0;
    }

    .company_settings_tab_text strong {
        display: block;

        color: inherit;

        font-size: 12px;
        font-weight: 800;
        line-height: 1.35;
    }

    .company_settings_tab_text small {
        display: block;

        margin-top: 2px;

        overflow: hidden;

        color: var(--company_settings_muted);

        font-size: 9px;
        line-height: 1.35;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .company_settings_tab_arrow {
        color: #a0a8b5;

        font-size: 10px;
    }

    .company_settings_tabs .nav-link:hover {
        border-color: #e5e8ed;

        color: var(--company_settings_primary);

        background: #ffffff;

        transform: translateX(2px);
    }

    .company_settings_tabs .nav-link.active {
        border-color:
            rgba(255, 107, 26, 0.24);

        color: var(--company_settings_primary);

        background: var(--company_settings_primary_soft);

        box-shadow:
            0 6px 16px
            rgba(255, 107, 26, 0.09);
    }

    .company_settings_tabs .nav-link.active
    .company_settings_tab_icon {
        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                var(--company_settings_primary),
                #ff9453
            );
    }

    .company_settings_tabs .nav-link.active
    .company_settings_tab_arrow {
        color: var(--company_settings_primary);
    }

    /* =========================================================
       TAB CONTENT AREA
    ========================================================= */

    .company_settings_content {
        min-width: 0;

        padding: 26px;
    }

    .company_settings_tab_pane {
        min-height: 420px;
    }

    .company_settings_section_heading {
        margin-bottom: 22px;
        padding-bottom: 16px;

        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        gap: 20px;

        border-bottom: 1px solid var(--company_settings_border);
    }

    .company_settings_section_heading_left {
        min-width: 0;

        display: flex;
        align-items: center;

        gap: 12px;
    }

    .company_settings_section_icon {
        width: 43px;
        height: 43px;

        display: grid;
        place-items: center;

        flex: 0 0 43px;

        border-radius: 12px;

        color: var(--company_settings_primary);

        background: var(--company_settings_primary_soft);

        font-size: 17px;
    }

    .company_settings_section_heading h2 {
        margin: 0;

        color: var(--company_settings_navy);

        font-size: 19px;
        font-weight: 800;
        line-height: 1.3;
    }

    .company_settings_section_heading p {
        margin: 4px 0 0;

        color: var(--company_settings_muted);

        font-size: 11px;
        line-height: 1.5;
    }

    .company_settings_required_note {
        padding: 6px 9px;

        flex: 0 0 auto;

        border-radius: 20px;

        color: var(--company_settings_muted);

        background: #f6f7f9;

        font-size: 9px;
        font-weight: 700;
    }

    /* =========================================================
       FORM LAYOUT
    ========================================================= */

    .company_settings_form_grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .company_settings_field_full {
        grid-column: 1 / -1;
    }

    .company_settings_field {
        min-width: 0;
    }

    .company_settings_label {
        margin-bottom: 7px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;

        color: var(--company_settings_navy);

        font-size: 11px;
        font-weight: 800;
        line-height: 1.4;
    }

    .company_settings_label span {
        color: var(--company_settings_muted);

        font-size: 8px;
        font-weight: 600;
    }

    .company_settings_input_group {
        position: relative;
    }

    .company_settings_input_icon {
        position: absolute;

        top: 50%;
        left: 13px;

        z-index: 2;

        color: #9aa3b1;

        font-size: 14px;

        transform: translateY(-50%);

        pointer-events: none;
    }

    .company_settings_input,
    .company_settings_textarea {
        width: 100%;

        border: 1px solid var(--company_settings_border_dark);
        border-radius: var(--company_settings_radius_small);

        color: var(--company_settings_navy);

        background: #ffffff;

        font-family: inherit;
        font-size: 12px;
        line-height: 1.5;

        outline: none;

        transition:
            border-color 170ms ease,
            box-shadow 170ms ease,
            background-color 170ms ease;
    }

    .company_settings_input {
        min-height: 45px;

        padding: 10px 13px;
    }

    .company_settings_input_has_icon {
        padding-left: 39px;
    }

    .company_settings_textarea {
        min-height: 125px;

        padding: 12px 13px;

        resize: vertical;
    }

    .company_settings_input::placeholder,
    .company_settings_textarea::placeholder {
        color: #a2aab6;
    }

    .company_settings_input:hover,
    .company_settings_textarea:hover {
        border-color: #adb5c1;
    }

    .company_settings_input:focus,
    .company_settings_textarea:focus {
        border-color: var(--company_settings_primary);

        background: #fffdfc;

        box-shadow:
            0 0 0 4px
            rgba(255, 107, 26, 0.09);
    }

    .company_settings_input.is-invalid,
    .company_settings_textarea.is-invalid {
        border-color: var(--company_settings_red);

        background: #fffafb;
    }

    .company_settings_field_help {
        margin-top: 6px;

        color: var(--company_settings_muted);

        font-size: 9px;
        line-height: 1.45;
    }

    .company_settings_error_text {
        margin-top: 6px;

        display: flex;
        align-items: center;

        gap: 5px;

        color: var(--company_settings_red);

        font-size: 9px;
        font-weight: 650;
    }

    /* =========================================================
       MEDIA UPLOAD
    ========================================================= */

    .company_settings_media_grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .company_settings_upload_card {
        position: relative;

        min-width: 0;
        padding: 18px;

        overflow: hidden;

        border: 1px solid var(--company_settings_border);
        border-radius: var(--company_settings_radius_medium);

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #fafbfc
            );
    }

    .company_settings_upload_header {
        margin-bottom: 14px;

        display: flex;
        align-items: center;

        gap: 10px;
    }

    .company_settings_upload_header_icon {
        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        flex: 0 0 38px;

        border-radius: 10px;

        color: var(--company_settings_primary);

        background: var(--company_settings_primary_soft);

        font-size: 15px;
    }

    .company_settings_upload_header h3 {
        margin: 0;

        color: var(--company_settings_navy);

        font-size: 13px;
        font-weight: 800;
    }

    .company_settings_upload_header p {
        margin: 2px 0 0;

        color: var(--company_settings_muted);

        font-size: 9px;
        line-height: 1.4;
    }

    .company_settings_preview {
        position: relative;

        min-height: 170px;

        margin-bottom: 13px;
        padding: 18px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 10px;

        overflow: hidden;

        border: 1px dashed #c9ced7;
        border-radius: 11px;

        background:
            repeating-linear-gradient(
                45deg,
                #fafbfc,
                #fafbfc 10px,
                #f6f7f9 10px,
                #f6f7f9 20px
            );

        text-align: center;
    }

    .company_settings_preview img {
        display: block;

        max-width: 100%;
        max-height: 105px;

        object-fit: contain;
        object-position: center;
    }

    .company_settings_preview_favicon img {
        max-width: 70px;
        max-height: 70px;
    }

    .company_settings_preview_empty {
        color: #9aa3b1;

        font-size: 30px;
    }

    .company_settings_preview_text {
        color: var(--company_settings_muted);

        font-size: 9px;
        font-weight: 650;
    }

    .company_settings_file_input {
        width: 100%;

        overflow: hidden;

        border: 1px solid var(--company_settings_border_dark);
        border-radius: 8px;

        color: var(--company_settings_text);

        background: #ffffff;

        font-size: 10px;

        cursor: pointer;
    }

    .company_settings_file_input::file-selector-button {
        min-height: 40px;

        margin-right: 10px;
        padding: 9px 13px;

        border: 0;
        border-right: 1px solid var(--company_settings_border);

        color: #ffffff;

        background: var(--company_settings_primary);

        font-family: inherit;
        font-size: 10px;
        font-weight: 700;

        cursor: pointer;

        transition: background-color 160ms ease;
    }

    .company_settings_file_input:hover::file-selector-button {
        background: var(--company_settings_primary_dark);
    }

    .company_settings_selected_file {
        min-height: 20px;

        margin-top: 7px;

        overflow: hidden;

        color: var(--company_settings_muted);

        font-size: 9px;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* =========================================================
       SOCIAL MEDIA FIELDS
    ========================================================= */

    .company_settings_social_field {
        position: relative;
    }

    .company_settings_social_icon {
        position: absolute;

        top: 50%;
        left: 12px;

        width: 25px;
        height: 25px;

        display: grid;
        place-items: center;

        border-radius: 7px;

        color: #ffffff;

        font-size: 11px;

        transform: translateY(-50%);

        pointer-events: none;
    }

    .company_settings_social_facebook {
        background: #1877f2;
    }

    .company_settings_social_messenger {
        background:
            linear-gradient(
                135deg,
                #00b2ff,
                #7b61ff
            );
    }

    .company_settings_social_x {
        background: #111111;
    }

    .company_settings_social_instagram {
        background:
            linear-gradient(
                135deg,
                #833ab4,
                #fd1d1d,
                #fcb045
            );
    }

    .company_settings_social_tiktok {
        background: #111111;
    }

    .company_settings_social_youtube {
        background: #ff0000;
    }

    .company_settings_social_field
    .company_settings_input {
        padding-left: 46px;
    }

    /* =========================================================
       SAVE FOOTER
    ========================================================= */

    .company_settings_save_footer {
        padding: 17px 26px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 18px;

        border-top: 1px solid var(--company_settings_border);

        background:
            linear-gradient(
                180deg,
                #ffffff,
                #fafbfc
            );
    }

    .company_settings_save_note {
        min-width: 0;

        display: flex;
        align-items: center;

        gap: 9px;

        color: var(--company_settings_muted);

        font-size: 10px;
        line-height: 1.45;
    }

    .company_settings_save_note_icon {
        width: 30px;
        height: 30px;

        display: grid;
        place-items: center;

        flex: 0 0 30px;

        border-radius: 50%;

        color: var(--company_settings_green);

        background: var(--company_settings_green_soft);
    }

    .company_settings_save_button {
        min-width: 170px;
        min-height: 45px;

        padding: 10px 18px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 8px;

        border: 0;
        border-radius: 9px;

        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                var(--company_settings_primary),
                #ff8f4b
            );

        box-shadow:
            0 9px 20px
            rgba(255, 107, 26, 0.22);

        font-family: inherit;
        font-size: 12px;
        font-weight: 800;

        cursor: pointer;

        transition:
            transform 170ms ease,
            box-shadow 170ms ease,
            opacity 170ms ease;
    }

    .company_settings_save_button:hover,
    .company_settings_save_button:focus-visible {
        box-shadow:
            0 13px 26px
            rgba(255, 107, 26, 0.29);

        transform: translateY(-2px);

        outline: none;
    }

    .company_settings_save_button:disabled {
        cursor: wait;

        opacity: 0.72;

        transform: none;
    }

    .company_settings_save_button_spinner {
        display: none;

        width: 16px;
        height: 16px;

        border: 2px solid rgba(255, 255, 255, 0.45);
        border-top-color: #ffffff;
        border-radius: 50%;

        animation:
            company_settings_spin
            650ms linear infinite;
    }

    .company_settings_form.is-submitting
    .company_settings_save_button_spinner {
        display: inline-block;
    }

    .company_settings_form.is-submitting
    .company_settings_save_button_icon {
        display: none;
    }

    @keyframes company_settings_spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 991px) {
        .company_settings_form_layout {
            grid-template-columns: 210px minmax(0, 1fr);
        }

        .company_settings_tabs_sidebar {
            padding:
                18px 10px;
        }

        .company_settings_content {
            padding: 22px 20px;
        }

        .company_settings_tabs .nav-link {
            grid-template-columns: 34px minmax(0, 1fr);

            padding: 9px;
        }

        .company_settings_tab_icon {
            width: 34px;
            height: 34px;

            font-size: 13px;
        }

        .company_settings_tab_arrow {
            display: none;
        }

        .company_settings_media_grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 767px) {
        .company_settings_page {
            padding:
                10px 7px 35px;
        }

        .company_settings_header {
            margin-bottom: 12px;
            padding: 15px;

            align-items: flex-start;

            border-radius: 12px;
        }

        .company_settings_header_left {
            gap: 10px;
        }

        .company_settings_header_icon {
            width: 44px;
            height: 44px;

            flex-basis: 44px;

            border-radius: 13px;

            font-size: 18px;
        }

        .company_settings_header h1 {
            font-size: 21px;
        }

        .company_settings_header p {
            font-size: 10px;
        }

        .company_settings_header_badge {
            width: 36px;
            height: 36px;
            min-height: 36px;

            padding: 0;

            justify-content: center;
        }

        .company_settings_header_badge span {
            display: none;
        }

        .company_settings_card {
            border-radius: 13px;
        }

        .company_settings_form_layout {
            display: block;
        }

        .company_settings_tabs_sidebar {
            padding: 8px;

            overflow-x: auto;

            border-right: 0;
            border-bottom: 1px solid var(--company_settings_border);

            scrollbar-width: none;
        }

        .company_settings_tabs_sidebar::-webkit-scrollbar {
            display: none;
        }

        .company_settings_tabs_intro {
            display: none;
        }

        .company_settings_tabs {
            min-width: max-content;

            display: flex;

            gap: 6px;
        }

        .company_settings_tabs .nav-item {
            width: auto;
        }

        .company_settings_tabs .nav-link {
            width: auto;
            min-height: 42px;

            padding: 6px 9px;

            grid-template-columns: 29px auto;

            gap: 6px;

            border-radius: 8px;
        }

        .company_settings_tab_icon {
            width: 29px;
            height: 29px;

            border-radius: 8px;

            font-size: 11px;
        }

        .company_settings_tab_text strong {
            font-size: 9px;

            white-space: nowrap;
        }

        .company_settings_tab_text small,
        .company_settings_tab_arrow {
            display: none;
        }

        .company_settings_content {
            padding: 17px 13px;
        }

        .company_settings_tab_pane {
            min-height: 0;
        }

        .company_settings_section_heading {
            margin-bottom: 17px;
            padding-bottom: 13px;

            align-items: center;
        }

        .company_settings_section_icon {
            width: 37px;
            height: 37px;

            flex-basis: 37px;

            border-radius: 10px;

            font-size: 14px;
        }

        .company_settings_section_heading h2 {
            font-size: 16px;
        }

        .company_settings_section_heading p {
            font-size: 9px;
        }

        .company_settings_required_note {
            display: none;
        }

        .company_settings_form_grid,
        .company_settings_media_grid {
            grid-template-columns: minmax(0, 1fr);

            gap: 14px;
        }

        .company_settings_field_full {
            grid-column: auto;
        }

        .company_settings_label {
            font-size: 10px;
        }

        .company_settings_input {
            min-height: 43px;

            font-size: 11px;
        }

        .company_settings_textarea {
            min-height: 110px;

            font-size: 11px;
        }

        .company_settings_upload_card {
            padding: 14px;
        }

        .company_settings_preview {
            min-height: 145px;
        }

        .company_settings_save_footer {
            padding: 13px;

            position: sticky;
            bottom: 0;
            z-index: 20;

            box-shadow:
                0 -7px 18px
                rgba(23, 32, 51, 0.06);
        }

        .company_settings_save_note {
            display: none;
        }

        .company_settings_save_button {
            width: 100%;
            min-width: 0;
            min-height: 44px;
        }
    }

    /* =========================================================
       SMALL MOBILE
    ========================================================= */

    @media (max-width: 390px) {
        .company_settings_page {
            padding-right: 4px;
            padding-left: 4px;
        }

        .company_settings_header {
            padding: 12px 10px;
        }

        .company_settings_header h1 {
            font-size: 18px;
        }

        .company_settings_content {
            padding:
                15px 9px;
        }

        .company_settings_upload_card {
            padding: 11px;
        }
    }

    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {
        .company_settings_tabs .nav-link,
        .company_settings_tab_icon,
        .company_settings_input,
        .company_settings_textarea,
        .company_settings_save_button {
            transition: none;
        }
    }
</style>

<div
    class="company_settings_page"
    data-initial-tab="{{ $initialTab }}"
>
    <div class="company_settings_container">

        {{-- =====================================================
             PAGE HEADER
        ====================================================== --}}

        <header class="company_settings_header">
            <div class="company_settings_header_left">
                <div class="company_settings_header_icon">
                    <i class="fas fa-building"></i>
                </div>

                <div class="company_settings_header_text">
                    <span class="company_settings_header_eyebrow">
                        Store Configuration
                    </span>

                    <h1>
                        Company Settings
                    </h1>

                    <p>
                        Manage your company information, branding, contact details and social media links.
                    </p>
                </div>
            </div>

            <div class="company_settings_header_badge">
                <i class="fas fa-shield-alt"></i>

                <span>
                    Company Profile
                </span>
            </div>
        </header>

        {{-- =====================================================
             SUCCESS MESSAGE
        ====================================================== --}}

        @if(session('success'))
            <div
                class="company_settings_alert company_settings_alert_success"
                role="alert"
            >
                <i class="fas fa-check-circle"></i>

                <div class="company_settings_alert_content">
                    <strong>
                        Settings updated
                    </strong>

                    <span>
                        {{ session('success') }}
                    </span>
                </div>

                <button
                    type="button"
                    class="company_settings_alert_close"
                    aria-label="Close message"
                >
                    <i class="fas fa-times"></i>
                </button>
            </div>
        @endif

        {{-- =====================================================
             VALIDATION ERRORS
        ====================================================== --}}

        @if($errors->any())
            <div
                class="company_settings_alert company_settings_alert_error"
                role="alert"
            >
                <i class="fas fa-exclamation-circle"></i>

                <div class="company_settings_alert_content">
                    <strong>
                        Please check the form
                    </strong>

                    <ul>
                        @foreach($errors->all() as $error)
                            <li>
                                {{ $error }}
                            </li>
                        @endforeach
                    </ul>
                </div>

                <button
                    type="button"
                    class="company_settings_alert_close"
                    aria-label="Close errors"
                >
                    <i class="fas fa-times"></i>
                </button>
            </div>
        @endif

        {{-- =====================================================
             SETTINGS FORM
        ====================================================== --}}

        <form
            id="companySettingsForm"
            class="company_settings_form"
            action="{{ route('admin.company-settings.update') }}"
            method="POST"
            enctype="multipart/form-data"
        >
            @csrf

            <div class="company_settings_card">
                <div class="company_settings_form_layout">

                    {{-- =========================================
                         LEFT TAB NAVIGATION
                    ========================================== --}}

                    <aside class="company_settings_tabs_sidebar">
                        <div class="company_settings_tabs_intro">
                            <span>
                                Settings Menu
                            </span>

                            <strong>
                                Company Profile
                            </strong>
                        </div>

                        <ul
                            class="nav nav-tabs company_settings_tabs"
                            id="companySettingsTabs"
                            role="tablist"
                        >
                            <li
                                class="nav-item"
                                role="presentation"
                            >
                                <button
                                    id="company-settings-basic-tab"
                                    class="nav-link {{ $initialTab === 'basic' ? 'active' : '' }}"
                                    data-bs-toggle="tab"
                                    data-bs-target="#company-settings-basic"
                                    data-company-tab="basic"
                                    type="button"
                                    role="tab"
                                    aria-controls="company-settings-basic"
                                    aria-selected="{{ $initialTab === 'basic' ? 'true' : 'false' }}"
                                >
                                    <span class="company_settings_tab_icon">
                                        <i class="fas fa-building"></i>
                                    </span>

                                    <span class="company_settings_tab_text">
                                        <strong>
                                            Basic Info
                                        </strong>

                                        <small>
                                            Company name and description
                                        </small>
                                    </span>

                                    <i class="fas fa-chevron-right company_settings_tab_arrow"></i>
                                </button>
                            </li>

                            <li
                                class="nav-item"
                                role="presentation"
                            >
                                <button
                                    id="company-settings-media-tab"
                                    class="nav-link {{ $initialTab === 'media' ? 'active' : '' }}"
                                    data-bs-toggle="tab"
                                    data-bs-target="#company-settings-media"
                                    data-company-tab="media"
                                    type="button"
                                    role="tab"
                                    aria-controls="company-settings-media"
                                    aria-selected="{{ $initialTab === 'media' ? 'true' : 'false' }}"
                                >
                                    <span class="company_settings_tab_icon">
                                        <i class="fas fa-image"></i>
                                    </span>

                                    <span class="company_settings_tab_text">
                                        <strong>
                                            Logo & Media
                                        </strong>

                                        <small>
                                            Company logo and favicon
                                        </small>
                                    </span>

                                    <i class="fas fa-chevron-right company_settings_tab_arrow"></i>
                                </button>
                            </li>

                            <li
                                class="nav-item"
                                role="presentation"
                            >
                                <button
                                    id="company-settings-contact-tab"
                                    class="nav-link {{ $initialTab === 'contact' ? 'active' : '' }}"
                                    data-bs-toggle="tab"
                                    data-bs-target="#company-settings-contact"
                                    data-company-tab="contact"
                                    type="button"
                                    role="tab"
                                    aria-controls="company-settings-contact"
                                    aria-selected="{{ $initialTab === 'contact' ? 'true' : 'false' }}"
                                >
                                    <span class="company_settings_tab_icon">
                                        <i class="fas fa-address-book"></i>
                                    </span>

                                    <span class="company_settings_tab_text">
                                        <strong>
                                            Contact Details
                                        </strong>

                                        <small>
                                            Phone, email and address
                                        </small>
                                    </span>

                                    <i class="fas fa-chevron-right company_settings_tab_arrow"></i>
                                </button>
                            </li>

                            <li
                                class="nav-item"
                                role="presentation"
                            >
                                <button
                                    id="company-settings-social-tab"
                                    class="nav-link {{ $initialTab === 'social' ? 'active' : '' }}"
                                    data-bs-toggle="tab"
                                    data-bs-target="#company-settings-social"
                                    data-company-tab="social"
                                    type="button"
                                    role="tab"
                                    aria-controls="company-settings-social"
                                    aria-selected="{{ $initialTab === 'social' ? 'true' : 'false' }}"
                                >
                                    <span class="company_settings_tab_icon">
                                        <i class="fas fa-share-alt"></i>
                                    </span>

                                    <span class="company_settings_tab_text">
                                        <strong>
                                            Social Links
                                        </strong>

                                        <small>
                                            Social media profile URLs
                                        </small>
                                    </span>

                                    <i class="fas fa-chevron-right company_settings_tab_arrow"></i>
                                </button>
                            </li>
                        </ul>
                    </aside>

                    {{-- =========================================
                         TAB CONTENT
                    ========================================== --}}

                    <div class="company_settings_content">
                        <div
                            class="tab-content"
                            id="companySettingsTabContent"
                        >

                            {{-- =================================
                                 BASIC INFORMATION
                            ================================== --}}

                            <section
                                id="company-settings-basic"
                                class="tab-pane fade company_settings_tab_pane {{ $initialTab === 'basic' ? 'show active' : '' }}"
                                role="tabpanel"
                                aria-labelledby="company-settings-basic-tab"
                                tabindex="0"
                            >
                                <div class="company_settings_section_heading">
                                    <div class="company_settings_section_heading_left">
                                        <div class="company_settings_section_icon">
                                            <i class="fas fa-info-circle"></i>
                                        </div>

                                        <div>
                                            <h2>
                                                Basic Information
                                            </h2>

                                            <p>
                                                Add the public name and a short description of your company.
                                            </p>
                                        </div>
                                    </div>

                                    <span class="company_settings_required_note">
                                        General company details
                                    </span>
                                </div>

                                <div class="company_settings_form_grid">
                                    <div class="company_settings_field company_settings_field_full">
                                        <label
                                            for="companySettingsName"
                                            class="company_settings_label"
                                        >
                                            Company Name

                                            <span>
                                                Public company name
                                            </span>
                                        </label>

                                        <div class="company_settings_input_group">
                                            <i class="fas fa-building company_settings_input_icon"></i>

                                            <input
                                                id="companySettingsName"
                                                type="text"
                                                name="name"
                                                class="company_settings_input company_settings_input_has_icon @error('name') is-invalid @enderror"
                                                value="{{ old('name', $setting->name) }}"
                                                placeholder="Example: Amrixa Software Solutions"
                                                autocomplete="organization"
                                            >
                                        </div>

                                        @error('name')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field company_settings_field_full">
                                        <label
                                            for="companySettingsDescription"
                                            class="company_settings_label"
                                        >
                                            Company Description

                                            <span>
                                                Brief introduction
                                            </span>
                                        </label>

                                        <textarea
                                            id="companySettingsDescription"
                                            name="comapny_desc"
                                            class="company_settings_textarea @error('comapny_desc') is-invalid @enderror"
                                            rows="7"
                                            placeholder="Write a short description about your company..."
                                        >{{ old('comapny_desc', $setting->comapny_desc) }}</textarea>

                                        <div class="company_settings_field_help">
                                            This description can be used in your website footer, company profile or About section.
                                        </div>

                                        @error('comapny_desc')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </section>

                            {{-- =================================
                                 MEDIA
                            ================================== --}}

                            <section
                                id="company-settings-media"
                                class="tab-pane fade company_settings_tab_pane {{ $initialTab === 'media' ? 'show active' : '' }}"
                                role="tabpanel"
                                aria-labelledby="company-settings-media-tab"
                                tabindex="0"
                            >
                                <div class="company_settings_section_heading">
                                    <div class="company_settings_section_heading_left">
                                        <div class="company_settings_section_icon">
                                            <i class="fas fa-photo-video"></i>
                                        </div>

                                        <div>
                                            <h2>
                                                Logo & Media
                                            </h2>

                                            <p>
                                                Upload your primary company logo and browser favicon.
                                            </p>
                                        </div>
                                    </div>

                                    <span class="company_settings_required_note">
                                        JPG, PNG, SVG, WEBP or ICO
                                    </span>
                                </div>

                                <div class="company_settings_media_grid">

                                    {{-- Logo --}}

                                    <div class="company_settings_upload_card">
                                        <div class="company_settings_upload_header">
                                            <div class="company_settings_upload_header_icon">
                                                <i class="fas fa-image"></i>
                                            </div>

                                            <div>
                                                <h3>
                                                    Company Logo
                                                </h3>

                                                <p>
                                                    Use a clear horizontal or square logo.
                                                </p>
                                            </div>
                                        </div>

                                        <div
                                            id="logoPreviewWrapper"
                                            class="company_settings_preview"
                                        >
                                            <img
                                                id="logoPreview"
                                                src="{{ $setting->logo ? asset('storage/' . $setting->logo) : '' }}"
                                                alt="Company logo preview"
                                                style="{{ $setting->logo ? '' : 'display: none;' }}"
                                            >

                                            <i
                                                id="logoPreviewEmpty"
                                                class="fas fa-cloud-upload-alt company_settings_preview_empty"
                                                style="{{ $setting->logo ? 'display: none;' : '' }}"
                                            ></i>

                                            <span class="company_settings_preview_text">
                                                Logo Preview
                                            </span>
                                        </div>

                                        <input
                                            id="logoInput"
                                            type="file"
                                            name="logo"
                                            class="company_settings_file_input @error('logo') is-invalid @enderror"
                                            accept="image/png,image/jpeg,image/jpg,image/webp,image/svg+xml"
                                        >

                                        <div
                                            id="logoSelectedFile"
                                            class="company_settings_selected_file"
                                        >
                                            Choose a new file to replace the current logo.
                                        </div>

                                        @error('logo')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    {{-- Favicon --}}

                                    <div class="company_settings_upload_card">
                                        <div class="company_settings_upload_header">
                                            <div class="company_settings_upload_header_icon">
                                                <i class="fas fa-star"></i>
                                            </div>

                                            <div>
                                                <h3>
                                                    Website Favicon
                                                </h3>

                                                <p>
                                                    A square image works best for browser tabs.
                                                </p>
                                            </div>
                                        </div>

                                        <div
                                            id="faviconPreviewWrapper"
                                            class="company_settings_preview company_settings_preview_favicon"
                                        >
                                            <img
                                                id="faviconPreview"
                                                src="{{ $setting->favicon ? asset('storage/' . $setting->favicon) : '' }}"
                                                alt="Favicon preview"
                                                style="{{ $setting->favicon ? '' : 'display: none;' }}"
                                            >

                                            <i
                                                id="faviconPreviewEmpty"
                                                class="fas fa-cloud-upload-alt company_settings_preview_empty"
                                                style="{{ $setting->favicon ? 'display: none;' : '' }}"
                                            ></i>

                                            <span class="company_settings_preview_text">
                                                Favicon Preview
                                            </span>
                                        </div>

                                        <input
                                            id="faviconInput"
                                            type="file"
                                            name="favicon"
                                            class="company_settings_file_input @error('favicon') is-invalid @enderror"
                                            accept=".ico,image/png,image/jpeg,image/jpg,image/webp,image/svg+xml"
                                        >

                                        <div
                                            id="faviconSelectedFile"
                                            class="company_settings_selected_file"
                                        >
                                            Recommended size: 32×32 or 64×64 pixels.
                                        </div>

                                        @error('favicon')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </section>

                            {{-- =================================
                                 CONTACT DETAILS
                            ================================== --}}

                            <section
                                id="company-settings-contact"
                                class="tab-pane fade company_settings_tab_pane {{ $initialTab === 'contact' ? 'show active' : '' }}"
                                role="tabpanel"
                                aria-labelledby="company-settings-contact-tab"
                                tabindex="0"
                            >
                                <div class="company_settings_section_heading">
                                    <div class="company_settings_section_heading_left">
                                        <div class="company_settings_section_icon">
                                            <i class="fas fa-address-card"></i>
                                        </div>

                                        <div>
                                            <h2>
                                                Contact Details
                                            </h2>

                                            <p>
                                                Add the contact information customers can use to reach your company.
                                            </p>
                                        </div>
                                    </div>

                                    <span class="company_settings_required_note">
                                        Customer-facing information
                                    </span>
                                </div>

                                <div class="company_settings_form_grid">
                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsPhone"
                                            class="company_settings_label"
                                        >
                                            Phone Number
                                        </label>

                                        <div class="company_settings_input_group">
                                            <i class="fas fa-phone-alt company_settings_input_icon"></i>

                                            <input
                                                id="companySettingsPhone"
                                                type="text"
                                                name="phone"
                                                class="company_settings_input company_settings_input_has_icon @error('phone') is-invalid @enderror"
                                                value="{{ old('phone', $setting->phone) }}"
                                                placeholder="+880 1XXX XXXXXX"
                                                autocomplete="tel"
                                            >
                                        </div>

                                        @error('phone')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsEmail"
                                            class="company_settings_label"
                                        >
                                            Email Address
                                        </label>

                                        <div class="company_settings_input_group">
                                            <i class="fas fa-envelope company_settings_input_icon"></i>

                                            <input
                                                id="companySettingsEmail"
                                                type="email"
                                                name="email"
                                                class="company_settings_input company_settings_input_has_icon @error('email') is-invalid @enderror"
                                                value="{{ old('email', $setting->email) }}"
                                                placeholder="info@company.com"
                                                autocomplete="email"
                                            >
                                        </div>

                                        @error('email')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsWhatsapp"
                                            class="company_settings_label"
                                        >
                                            WhatsApp Number
                                        </label>

                                        <div class="company_settings_input_group">
                                            <i class="fab fa-whatsapp company_settings_input_icon"></i>

                                            <input
                                                id="companySettingsWhatsapp"
                                                type="text"
                                                name="whatsapp_number"
                                                class="company_settings_input company_settings_input_has_icon @error('whatsapp_number') is-invalid @enderror"
                                                value="{{ old('whatsapp_number', $setting->whatsapp_number) }}"
                                                placeholder="+880 1XXX XXXXXX"
                                                autocomplete="tel"
                                            >
                                        </div>

                                        @error('whatsapp_number')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field company_settings_field_full">
                                        <label
                                            for="companySettingsAddress"
                                            class="company_settings_label"
                                        >
                                            Physical Address

                                            <span>
                                                Full office or business address
                                            </span>
                                        </label>

                                        <textarea
                                            id="companySettingsAddress"
                                            name="address"
                                            class="company_settings_textarea @error('address') is-invalid @enderror"
                                            rows="5"
                                            placeholder="Enter your complete company address..."
                                            autocomplete="street-address"
                                        >{{ old('address', $setting->address) }}</textarea>

                                        @error('address')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </section>

                            {{-- =================================
                                 SOCIAL LINKS
                            ================================== --}}

                            <section
                                id="company-settings-social"
                                class="tab-pane fade company_settings_tab_pane {{ $initialTab === 'social' ? 'show active' : '' }}"
                                role="tabpanel"
                                aria-labelledby="company-settings-social-tab"
                                tabindex="0"
                            >
                                <div class="company_settings_section_heading">
                                    <div class="company_settings_section_heading_left">
                                        <div class="company_settings_section_icon">
                                            <i class="fas fa-share-nodes"></i>
                                        </div>

                                        <div>
                                            <h2>
                                                Social Media Links
                                            </h2>

                                            <p>
                                                Connect your website with official company social profiles.
                                            </p>
                                        </div>
                                    </div>

                                    <span class="company_settings_required_note">
                                        Enter complete URLs
                                    </span>
                                </div>

                                <div class="company_settings_form_grid">
                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsFacebook"
                                            class="company_settings_label"
                                        >
                                            Facebook Page
                                        </label>

                                        <div class="company_settings_social_field">
                                            <span class="company_settings_social_icon company_settings_social_facebook">
                                                <i class="fab fa-facebook-f"></i>
                                            </span>

                                            <input
                                                id="companySettingsFacebook"
                                                type="url"
                                                name="facebook_page_link"
                                                class="company_settings_input @error('facebook_page_link') is-invalid @enderror"
                                                value="{{ old('facebook_page_link', $setting->facebook_page_link) }}"
                                                placeholder="https://facebook.com/yourpage"
                                            >
                                        </div>

                                        @error('facebook_page_link')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsMessenger"
                                            class="company_settings_label"
                                        >
                                            Messenger
                                        </label>

                                        <div class="company_settings_social_field">
                                            <span class="company_settings_social_icon company_settings_social_messenger">
                                                <i class="fab fa-facebook-messenger"></i>
                                            </span>

                                            <input
                                                id="companySettingsMessenger"
                                                type="url"
                                                name="messenger"
                                                class="company_settings_input @error('messenger') is-invalid @enderror"
                                                value="{{ old('messenger', $setting->messenger) }}"
                                                placeholder="https://m.me/yourpage"
                                            >
                                        </div>

                                        @error('messenger')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsX"
                                            class="company_settings_label"
                                        >
                                            X (Twitter)
                                        </label>

                                        <div class="company_settings_social_field">
                                            <span class="company_settings_social_icon company_settings_social_x">
                                                <i class="fab fa-x-twitter"></i>
                                            </span>

                                            <input
                                                id="companySettingsX"
                                                type="url"
                                                name="x_link"
                                                class="company_settings_input @error('x_link') is-invalid @enderror"
                                                value="{{ old('x_link', $setting->x_link) }}"
                                                placeholder="https://x.com/yourhandle"
                                            >
                                        </div>

                                        @error('x_link')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsInstagram"
                                            class="company_settings_label"
                                        >
                                            Instagram
                                        </label>

                                        <div class="company_settings_social_field">
                                            <span class="company_settings_social_icon company_settings_social_instagram">
                                                <i class="fab fa-instagram"></i>
                                            </span>

                                            <input
                                                id="companySettingsInstagram"
                                                type="url"
                                                name="instagram_link"
                                                class="company_settings_input @error('instagram_link') is-invalid @enderror"
                                                value="{{ old('instagram_link', $setting->instagram_link) }}"
                                                placeholder="https://instagram.com/yourhandle"
                                            >
                                        </div>

                                        @error('instagram_link')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsTikTok"
                                            class="company_settings_label"
                                        >
                                            TikTok
                                        </label>

                                        <div class="company_settings_social_field">
                                            <span class="company_settings_social_icon company_settings_social_tiktok">
                                                <i class="fab fa-tiktok"></i>
                                            </span>

                                            <input
                                                id="companySettingsTikTok"
                                                type="url"
                                                name="tiktok_link"
                                                class="company_settings_input @error('tiktok_link') is-invalid @enderror"
                                                value="{{ old('tiktok_link', $setting->tiktok_link) }}"
                                                placeholder="https://tiktok.com/@yourhandle"
                                            >
                                        </div>

                                        @error('tiktok_link')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="company_settings_field">
                                        <label
                                            for="companySettingsYoutube"
                                            class="company_settings_label"
                                        >
                                            YouTube
                                        </label>

                                        <div class="company_settings_social_field">
                                            <span class="company_settings_social_icon company_settings_social_youtube">
                                                <i class="fab fa-youtube"></i>
                                            </span>

                                            <input
                                                id="companySettingsYoutube"
                                                type="url"
                                                name="youtube_link"
                                                class="company_settings_input @error('youtube_link') is-invalid @enderror"
                                                value="{{ old('youtube_link', $setting->youtube_link) }}"
                                                placeholder="https://youtube.com/@yourchannel"
                                            >
                                        </div>

                                        @error('youtube_link')
                                            <div class="company_settings_error_text">
                                                <i class="fas fa-exclamation-circle"></i>

                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>

                {{-- =============================================
                     SAVE FOOTER
                ============================================== --}}

                <footer class="company_settings_save_footer">
                    <div class="company_settings_save_note">
                        <span class="company_settings_save_note_icon">
                            <i class="fas fa-shield-alt"></i>
                        </span>

                        <span>
                            Changes will be applied after you save this form.
                        </span>
                    </div>

                    <button
                        id="companySettingsSaveButton"
                        type="submit"
                        class="company_settings_save_button"
                    >
                        <span class="company_settings_save_button_spinner"></span>

                        <i class="fas fa-save company_settings_save_button_icon"></i>

                        <span>
                            Save Changes
                        </span>
                    </button>
                </footer>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener(
        "DOMContentLoaded",
        function () {
            "use strict";

            const page =
                document.querySelector(
                    ".company_settings_page"
                );

            const form =
                document.getElementById(
                    "companySettingsForm"
                );

            const saveButton =
                document.getElementById(
                    "companySettingsSaveButton"
                );

            const tabStorageKey =
                "admin:company-settings:active-tab";

            /*
            |--------------------------------------------------------------------------
            | Image Preview
            |--------------------------------------------------------------------------
            */

            function setupImagePreview(
                inputId,
                previewId,
                emptyIconId,
                selectedFileId
            ) {
                const input =
                    document.getElementById(
                        inputId
                    );

                const preview =
                    document.getElementById(
                        previewId
                    );

                const emptyIcon =
                    document.getElementById(
                        emptyIconId
                    );

                const selectedFile =
                    document.getElementById(
                        selectedFileId
                    );

                if (
                    !input ||
                    !preview
                ) {
                    return;
                }

                let temporaryUrl = "";

                input.addEventListener(
                    "change",
                    function () {
                        const file =
                            input.files &&
                            input.files[0]
                                ? input.files[0]
                                : null;

                        if (!file) {
                            return;
                        }

                        if (temporaryUrl) {
                            URL.revokeObjectURL(
                                temporaryUrl
                            );
                        }

                        temporaryUrl =
                            URL.createObjectURL(
                                file
                            );

                        preview.src =
                            temporaryUrl;

                        preview.style.display =
                            "block";

                        if (emptyIcon) {
                            emptyIcon.style.display =
                                "none";
                        }

                        if (selectedFile) {
                            selectedFile.textContent =
                                file.name;
                        }
                    }
                );

                window.addEventListener(
                    "beforeunload",
                    function () {
                        if (temporaryUrl) {
                            URL.revokeObjectURL(
                                temporaryUrl
                            );
                        }
                    }
                );
            }

            setupImagePreview(
                "logoInput",
                "logoPreview",
                "logoPreviewEmpty",
                "logoSelectedFile"
            );

            setupImagePreview(
                "faviconInput",
                "faviconPreview",
                "faviconPreviewEmpty",
                "faviconSelectedFile"
            );

            /*
            |--------------------------------------------------------------------------
            | Close Alerts
            |--------------------------------------------------------------------------
            */

            document
                .querySelectorAll(
                    ".company_settings_alert_close"
                )
                .forEach(
                    function (button) {
                        button.addEventListener(
                            "click",
                            function () {
                                const alert =
                                    button.closest(
                                        ".company_settings_alert"
                                    );

                                if (alert) {
                                    alert.remove();
                                }
                            }
                        );
                    }
                );

            /*
            |--------------------------------------------------------------------------
            | Activate and Remember Tab
            |--------------------------------------------------------------------------
            */

            const tabButtons =
                Array.from(
                    document.querySelectorAll(
                        "[data-company-tab]"
                    )
                );

            function manuallyShowTab(
                tabButton
            ) {
                if (!tabButton) {
                    return;
                }

                const targetSelector =
                    tabButton.getAttribute(
                        "data-bs-target"
                    );

                const targetPane =
                    targetSelector
                        ? document.querySelector(
                            targetSelector
                        )
                        : null;

                tabButtons.forEach(
                    function (button) {
                        button.classList.remove(
                            "active"
                        );

                        button.setAttribute(
                            "aria-selected",
                            "false"
                        );
                    }
                );

                document
                    .querySelectorAll(
                        "#companySettingsTabContent .tab-pane"
                    )
                    .forEach(
                        function (pane) {
                            pane.classList.remove(
                                "show",
                                "active"
                            );
                        }
                    );

                tabButton.classList.add(
                    "active"
                );

                tabButton.setAttribute(
                    "aria-selected",
                    "true"
                );

                if (targetPane) {
                    targetPane.classList.add(
                        "show",
                        "active"
                    );
                }
            }

            function showTabByName(
                tabName
            ) {
                const tabButton =
                    document.querySelector(
                        '[data-company-tab="' +
                        tabName +
                        '"]'
                    );

                if (!tabButton) {
                    return;
                }

                if (
                    window.bootstrap &&
                    window.bootstrap.Tab
                ) {
                    const instance =
                        window.bootstrap.Tab.getOrCreateInstance(
                            tabButton
                        );

                    instance.show();
                } else {
                    manuallyShowTab(
                        tabButton
                    );
                }
            }

            tabButtons.forEach(
                function (tabButton) {
                    tabButton.addEventListener(
                        "shown.bs.tab",
                        function () {
                            const tabName =
                                tabButton.getAttribute(
                                    "data-company-tab"
                                );

                            if (tabName) {
                                localStorage.setItem(
                                    tabStorageKey,
                                    tabName
                                );
                            }
                        }
                    );

                    tabButton.addEventListener(
                        "click",
                        function () {
                            const tabName =
                                tabButton.getAttribute(
                                    "data-company-tab"
                                );

                            if (tabName) {
                                localStorage.setItem(
                                    tabStorageKey,
                                    tabName
                                );
                            }

                            if (
                                !window.bootstrap ||
                                !window.bootstrap.Tab
                            ) {
                                manuallyShowTab(
                                    tabButton
                                );
                            }
                        }
                    );
                }
            );

            const initialTab =
                page &&
                page.dataset.initialTab
                    ? page.dataset.initialTab
                    : "basic";

            const hasValidationErrors =
                document.querySelector(
                    ".company_settings_alert_error"
                ) !== null;

            const savedTab =
                localStorage.getItem(
                    tabStorageKey
                );

            const tabToOpen =
                hasValidationErrors
                    ? initialTab
                    : (
                        savedTab ||
                        initialTab
                    );

            showTabByName(
                tabToOpen
            );

            /*
            |--------------------------------------------------------------------------
            | Prevent Duplicate Submission
            |--------------------------------------------------------------------------
            */

            if (form) {
                form.addEventListener(
                    "submit",
                    function () {
                        if (
                            form.classList.contains(
                                "is-submitting"
                            )
                        ) {
                            return;
                        }

                        form.classList.add(
                            "is-submitting"
                        );

                        if (saveButton) {
                            saveButton.disabled =
                                true;
                        }
                    }
                );
            }
        }
    );
</script>

@endsection