@extends('crm.layouts.app')

@section('title', 'Settings')

@section('content')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
    <p class="mt-1 text-sm text-gray-500">Manage your studio settings and subscription.</p>
</div>

<!-- Tab Navigation -->
<div>
    <div class="grid grid-cols-1 sm:hidden">
        <select aria-label="Select a tab" onchange="window.location.href=this.value" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
            <option value="{{ route('crm.settings.index', ['tab' => 'general']) }}" {{ request()->get('tab', 'general') === 'general' ? 'selected' : '' }}>General</option>
            <option value="{{ route('crm.settings.index', ['tab' => 'hours']) }}" {{ request()->get('tab') === 'hours' ? 'selected' : '' }}>Hours</option>
            <option value="{{ route('crm.settings.index', ['tab' => 'payments']) }}" {{ request()->get('tab') === 'payments' ? 'selected' : '' }}>Payments</option>
            <option value="{{ route('crm.settings.index', ['tab' => 'notifications']) }}" {{ request()->get('tab') === 'notifications' ? 'selected' : '' }}>Notifications</option>
            <option value="{{ route('crm.settings.index', ['tab' => 'customization']) }}" {{ request()->get('tab') === 'customization' ? 'selected' : '' }}>Customization</option>
            @if(\App\Helpers\FeatureAccess::userHasFeature('white_label'))
                <option value="{{ route('crm.settings.index', ['tab' => 'branding']) }}" {{ request()->get('tab') === 'branding' ? 'selected' : '' }}>Branding</option>
            @endif
            @if(\App\Helpers\FeatureAccess::userHasFeature('automated_reminders') || \App\Helpers\FeatureAccess::userHasFeature('marketing_automation') || \App\Helpers\FeatureAccess::userHasFeature('review_management'))
                <option value="{{ route('crm.settings.index', ['tab' => 'integrations']) }}" {{ request()->get('tab') === 'integrations' ? 'selected' : '' }}>Integrations</option>
            @endif
            <option value="{{ route('crm.settings.index', ['tab' => 'plan']) }}" {{ request()->get('tab') === 'plan' ? 'selected' : '' }}>Plan</option>
        </select>
        <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500">
            <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
        </svg>
    </div>
    <div class="hidden sm:block">
        <div class="border-b border-gray-200">
            <nav aria-label="Tabs" class="-mb-px flex gap-4">
                @php
                    $currentTab = request()->get('tab', 'general');
                @endphp
                <a href="{{ route('crm.settings.index', ['tab' => 'general']) }}" class="group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium {{ $currentTab === 'general' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-2 -ml-0.5 size-5 {{ $currentTab === 'general' ? 'text-indigo-500' : 'text-gray-400 group-hover:text-gray-500' }}">
                        <path d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z" />
                    </svg>
                    <span>General</span>
                </a>
                <a href="{{ route('crm.settings.index', ['tab' => 'hours']) }}" class="group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium {{ $currentTab === 'hours' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-2 -ml-0.5 size-5 {{ $currentTab === 'hours' ? 'text-indigo-500' : 'text-gray-400 group-hover:text-gray-500' }}">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" />
                    </svg>
                    <span>Hours</span>
                </a>
                <a href="{{ route('crm.settings.index', ['tab' => 'payments']) }}" class="group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium {{ $currentTab === 'payments' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-2 -ml-0.5 size-5 {{ $currentTab === 'payments' ? 'text-indigo-500' : 'text-gray-400 group-hover:text-gray-500' }}">
                        <path fill-rule="evenodd" d="M2.5 4A1.5 1.5 0 0 0 1 5.5V6h18v-.5A1.5 1.5 0 0 0 17.5 4h-15ZM19 8.5H1v6A1.5 1.5 0 0 0 2.5 16h15a1.5 1.5 0 0 0 1.5-1.5v-6ZM3 13.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Zm4.75-.75a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z" clip-rule="evenodd" />
                    </svg>
                    <span>Payments</span>
                </a>
                <a href="{{ route('crm.settings.index', ['tab' => 'notifications']) }}" class="group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium {{ $currentTab === 'notifications' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-2 -ml-0.5 size-5 {{ $currentTab === 'notifications' ? 'text-indigo-500' : 'text-gray-400 group-hover:text-gray-500' }}">
                        <path d="M10 2a6 6 0 0 0-6 6v3.586l-.707.707A1 1 0 0 0 4 14h12a1 1 0 0 0 .707-1.707L16 11.586V8a6 6 0 0 0-6-6ZM10 18a3 3 0 0 1-3-3h6a3 3 0 0 1-3 3Z" />
                    </svg>
                    <span>Notifications</span>
                </a>
                <a href="{{ route('crm.settings.index', ['tab' => 'customization']) }}" class="group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium {{ $currentTab === 'customization' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-2 -ml-0.5 size-5 {{ $currentTab === 'customization' ? 'text-indigo-500' : 'text-gray-400 group-hover:text-gray-500' }}">
                        <path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 0 0 3 3.5v13A1.5 1.5 0 0 0 4.5 18h11a1.5 1.5 0 0 0 1.5-1.5V7.621a1.5 1.5 0 0 0-.44-1.06l-4.12-4.122A1.5 1.5 0 0 0 11.378 2H4.5Zm2.25 8.5a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 3a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z" clip-rule="evenodd" />
                    </svg>
                    <span>Customization</span>
                </a>
                @if(\App\Helpers\FeatureAccess::userHasFeature('white_label'))
                    <a href="{{ route('crm.settings.index', ['tab' => 'branding']) }}" class="group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium {{ $currentTab === 'branding' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="mr-2 -ml-0.5 size-5 {{ $currentTab === 'branding' ? 'text-indigo-500' : 'text-gray-400 group-hover:text-gray-500' }}">
                            <path fill-rule="evenodd" d="M1 2.75A.75.75 0 0 1 1.75 2h16.5a.75.75 0 0 1 0 1.5H18v8.75A2.75 2.75 0 0 1 15.25 15h-1.072l.798 3.06a.75.75 0 0 1-1.452.38L13.41 18H6.59l-.114.44a.75.75 0 0 1-1.452-.38L5.823 15H4.75A2.75 2.75 0 0 1 2 12.25V3.5h-.25A.75.75 0 0 1 1 2.75ZM7.373 15l-.391 1.5h6.037l-.392-1.5H7.373Zm7.49-8.931a.75.75 0 0 1-.175 1.046 19.326 19.326 0 0 0-3.398 3.098.75.75 0 0 1-1.097.04L8.5 8.561l-2.22 2.22A.75.75 0 1 1 5.22 9.72l2.75-2.75a.75.75 0 0 1 1.06 0l1.664 1.663a20.786 20.786 0 0 1 3.122-2.74.75.75 0 0 1 1.046.176Z" clip-rule="evenodd" />
                        </svg>
                        <span>Branding</span>
                    </a>
                @endif
                @if(\App\Helpers\FeatureAccess::userHasFeature('automated_reminders') || \App\Helpers\FeatureAccess::userHasFeature('marketing_automation') || \App\Helpers\FeatureAccess::userHasFeature('review_management'))
                    <a href="{{ route('crm.settings.index', ['tab' => 'integrations']) }}" class="group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium {{ $currentTab === 'integrations' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="mr-2 -ml-0.5 size-5 {{ $currentTab === 'integrations' ? 'text-indigo-500' : 'text-gray-400 group-hover:text-gray-500' }}">
                            <path d="M10.75 16.82A7.462 7.462 0 0 1 15 15.5c.71 0 1.396.098 2.046.282A.75.75 0 0 0 18 15.06v-11a.75.75 0 0 0-.546-.721A9.006 9.006 0 0 0 15 3a8.963 8.963 0 0 0-4.25 1.065V16.82ZM9.25 4.065A8.963 8.963 0 0 0 5 3c-.85 0-1.673.118-2.454.339A.75.75 0 0 0 2 4.06v11a.75.75 0 0 0 .954.721A7.506 7.506 0 0 1 5 15.5c1.579 0 3.042.487 4.25 1.32V4.065Z" />
                        </svg>
                        <span>Integrations</span>
                    </a>
                @endif
                <a href="{{ route('crm.settings.index', ['tab' => 'plan']) }}" class="group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium {{ $currentTab === 'plan' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-2 -ml-0.5 size-5 {{ $currentTab === 'plan' ? 'text-indigo-500' : 'text-gray-400 group-hover:text-gray-500' }}">
                        <path d="M2.5 4A1.5 1.5 0 0 0 1 5.5V6h18v-.5A1.5 1.5 0 0 0 17.5 4h-15ZM19 8.5H1v6A1.5 1.5 0 0 0 2.5 16h15a1.5 1.5 0 0 0 1.5-1.5v-6ZM3 13.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Zm4.75-.75a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                    <span>Plan</span>
                </a>
            </nav>
        </div>
    </div>
</div>

<!-- Tab Content -->
<div class="mt-8">
    @php
        $tab = request()->get('tab', 'general');
    @endphp

    @if($tab === 'general')
        @include('crm.settings.partials.general')
    @elseif($tab === 'hours')
        @include('crm.settings.partials.hours')
    @elseif($tab === 'payments')
        @include('crm.settings.partials.payments')
    @elseif($tab === 'notifications')
        @include('crm.settings.partials.notifications')
    @elseif($tab === 'customization')
        @include('crm.settings.partials.customization')
    @elseif($tab === 'branding')
        @include('crm.settings.partials.branding')
    @elseif($tab === 'integrations')
        @include('crm.settings.partials.integrations')
    @elseif($tab === 'plan')
        @include('crm.settings.partials.plan')
    @endif
</div>
@endsection