@extends('home_layout.master_sidebar')

@section('page_styles')
    <!-- CSS for Dropify, and ColorisJS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropify@0.2.2/dist/css/dropify.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/css/bootstrap-colorpicker.min.css" integrity="sha512-m/uSzCYYP5f55d4nUi9mnY9m49I8T+GUEe4OQd3fYTpFU9CIaPazUG/f8yUkY0EWlXBJnpsA7IToT2ljMgB87Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@melloware/coloris/dist/coloris.min.css" />

    <style>
        /* Layout & typography */
        .settings-section {
            padding: 30px;
            margin-top: 30px;
        }
        .settings-header {
            margin-bottom: 30px;
            text-align: center;
        }
        .settings-header h3 {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #444;
        }
        .form-control {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px 15px;
            font-size: 1rem;
        }
        .input-group-text {
            background-color: #f7f7f7;
            border: 1px solid #ddd;
            border-right: 0;
            padding: 10px 15px;
            font-size: 1rem;
            color: #555;
        }
        /* Social media input groups */
        .social-input-group .input-group-text {
            width: 45px;
            justify-content: center;
        }
        /* Gallery Thumbnails */
        .gallery-thumbnails {
            margin-top: 10px;
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .gallery-thumbnails img {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border: 2px solid transparent;
            border-radius: 4px;
            cursor: pointer;
        }
        .gallery-thumbnails img:hover {
            border-color: #007bff;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Company and Branding',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => '#'],
           ['title' => 'Company and Branding', 'link' => '#']
       ]
   ])
@stop

@section('content')
    <div class="settings-section container">
        <div class="settings-header">
            <h3>Company and Branding Settings</h3>
        </div>

        @if(session('success_msg'))
            <div class="alert alert-success">
                {{ session('success_msg') }}
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger">
                <ul style="margin:0; padding-left:20px;">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            <!-- Company Name -->
            <div class="form-group">
                <label class="form-label" for="company_name">Company Name</label>
                <input type="text" id="company_name" name="company_name" class="form-control" value="{{ old('company_name', $company->name ?? '') }}" required>
            </div>

            <!-- Company Booking Link -->
            <div class="form-group">
                <label class="form-label" for="company_slug">Company Booking Link</label>
                <div class="input-group">
                    <span class="input-group-text">{{ route('booking.company', '') }}/</span>
                    <input type="text" id="company-slug" name="slug" class="form-control" value="{{ old('slug', $company->slug ?? '') }}" placeholder="company-slug">
                    <button type="button" class="btn btn-outline-secondary" id="copy-link">Copy</button>
                    <button type="button" class="btn btn-outline-secondary" id="open-link">Go</button>
                </div>
            </div>

            <!-- Company Website with Globe Icon -->
            <div class="form-group">
                <label class="form-label" for="website">Website</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fa fa-globe"></i></span>
                    <input type="url" id="website" name="website" class="form-control" value="{{ old('website', $company->website ?? '') }}" placeholder="https://yourcompany.com">
                </div>
            </div>

            <!-- Timezone (moved below Website) -->
            <div class="form-group">
                <label class="form-label" for="timezone">Timezone</label>
                <select name="timezone" id="timezone" class="form-control">
                    @foreach(getAllowedUSATimezones() as $tzKey => $tzLabel)
                        <option value="{{ $tzKey }}" {{ (old('timezone', $company->timezone ?? 'America/New_York') == $tzKey) ? 'selected' : '' }}>{{ $tzLabel }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Primary & Secondary Colors (ColorisJS) -->
            <div class="form-group">
                <label class="form-label" for="primary_color">Primary Color</label>
                <div class="input-group">
                    <input type="text" id="primary_color" name="primary_color" class="form-control coloris" value="{{ old('primary_color', $company->primary_color ?? '#000000') }}">
                    <span class="input-group-text"><i></i></span>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label" for="secondary_color">Secondary Color</label>
                <div class="input-group">
                    <input type="text" id="secondary_color" name="secondary_color" class="form-control coloris" value="{{ old('secondary_color', $company->secondary_color ?? '#ffffff') }}">
                    <span class="input-group-text"><i></i></span>
                </div>
            </div>

            <!-- Company Welcome Message -->
            <div class="form-group">
                <label class="form-label" for="welcome_message">Company Welcome Message</label>
                <textarea id="welcome_message" name="welcome_message" class="form-control" rows="3">{{ old('welcome_message', $company->welcome_message ?? '') }}</textarea>
            </div>

            <!-- About Us -->
            <div class="form-group">
                <label class="form-label" for="about_us">About Us</label>
                <textarea id="about_us" name="about_us" class="form-control" rows="4">{{ old('about_us', $company->about_us ?? '') }}</textarea>
            </div>

            <!-- Business Hours -->
            <div class="form-group">
                <label class="form-label" for="business_hours">Business Hours</label>
                <textarea id="business_hours" name="business_hours" class="form-control" rows="2">{{ old('business_hours', $company->business_hours ?? '') }}</textarea>
            </div>

            <!-- Contact Text -->
            <div class="form-group">
                <label class="form-label" for="contact_text">Contact Text</label>
                <textarea id="contact_text" name="contact_text" class="form-control" rows="2">{{ old('contact_text', $company->contact_text ?? '') }}</textarea>
            </div>

            <!-- Company Logo (Dropify) -->
            <div class="form-group">
                <label class="form-label" for="company_logo">Company Logo</label>
                <input type="file" id="company_logo" name="company_logo" class="dropify" data-default-file="{{ isset($company->logo) ? asset('uploads/company_logos/' . $company->logo) : '' }}" data-allowed-file-extensions="jpg png gif" data-max-file-size="5M">
            </div>

            <!-- Company Banner (Dropify) -->
            <div class="form-group">
                <label class="form-label" for="company_banner">Company Banner</label>
                <input type="file" id="company_banner" name="company_banner" class="dropify" data-default-file="{{ isset($company->banner) ? asset('uploads/company_banners/' . $company->banner) : '' }}" data-allowed-file-extensions="jpg png gif" data-max-file-size="5M">
            </div>

            <!-- Company Address -->
            <div class="form-group">
                <label class="form-label" for="address">Address</label>
                <input type="text" id="address" name="address" class="form-control" value="{{ old('address', $company->address ?? '') }}">
            </div>

            <!-- Company Email -->
            <div class="form-group">
                <label class="form-label" for="email">Email</label>
                <input type="email" id="email" name="email" class="form-control" value="{{ old('email', $company->email ?? '') }}">
            </div>

            <!-- Company Phone Number -->
            <div class="form-group">
                <label class="form-label" for="phone">Phone Number</label>
                <input type="text" id="phone" name="phone" class="form-control" value="{{ old('phone', $company->phone ?? '') }}">
            </div>

            <!-- Social Media Links with Icons -->
            <div class="form-group social-input-group">
                <label class="form-label" for="facebook_link">Facebook Link</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fab fa-facebook-f"></i></span>
                    <input type="url" id="facebook_link" name="facebook_link" class="form-control" value="{{ old('facebook_link', $company->facebook_link ?? '') }}">
                </div>
            </div>
            <div class="form-group social-input-group">
                <label class="form-label" for="tiktok_link">TikTok Link</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fab fa-tiktok"></i></span>
                    <input type="url" id="tiktok_link" name="tiktok_link" class="form-control" value="{{ old('tiktok_link', $company->tiktok_link ?? '') }}">
                </div>
            </div>
            <div class="form-group social-input-group">
                <label class="form-label" for="instagram_link">Instagram Link</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fab fa-instagram"></i></span>
                    <input type="url" id="instagram_link" name="instagram_link" class="form-control" value="{{ old('instagram_link', $company->instagram_link ?? '') }}">
                </div>
            </div>
            <div class="form-group social-input-group">
                <label class="form-label" for="twitter_link">X/Twitter Link</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fab fa-twitter"></i></span>
                    <input type="url" id="twitter_link" name="twitter_link" class="form-control" value="{{ old('twitter_link', $company->twitter_link ?? '') }}">
                </div>
            </div>

            <!-- Payment Policy -->
            <div class="form-group">
                <label class="form-label" for="payment_policy">Payment Policy</label>
                <textarea id="payment_policy" name="payment_policy" class="form-control" rows="3">{{ old('payment_policy', $company->payment_policy ?? '') }}</textarea>
            </div>

            <!-- Cancellation Policy -->
            <div class="form-group">
                <label class="form-label" for="cancellation_policy">Cancellation Policy</label>
                <textarea id="cancellation_policy" name="cancellation_policy" class="form-control" rows="3">{{ old('cancellation_policy', $company->cancellation_policy ?? '') }}</textarea>
            </div>

            <!-- Gallery Uploads (Standard Multiple File Input) -->
            <div class="form-group">
                <label class="form-label" for="gallery_images">Gallery Images</label>
                <input type="file" id="gallery_images" name="gallery_images[]" class="form-control-file" multiple>
                <small>Upload multiple images to showcase your company.</small>
            </div>

            <!-- Existing Gallery Thumbnails -->
            @if(isset($company->galleryUploads) && $company->galleryUploads->count() > 0)
                <div class="gallery-thumbnails mt-2">
                    @foreach($company->galleryUploads as $upload)
                        <img src="{{ asset('storage/' . $upload->filename) }}" alt="{{ $upload->original_name }}">
                    @endforeach
                </div>
            @endif

            <!-- Toggle Branding -->
            <div class="form-group mt-5">
                <label class="form-label" for="use_branding">Use Imprius Branding</label>
                <div class="form-check">
                    <input type="checkbox" id="use_branding" name="use_branding" class="form-check-input" value="1" {{ isset($company->use_branding) && $company->use_branding ? 'checked' : '' }}>
                    <label class="form-check-label" for="use_branding">Display Imprius branding on scheduling pages, notifications, and confirmations.</label>
                </div>
            </div>

            <!-- Save and Cancel Buttons -->
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-outline-secondary" onclick="window.history.back()">Cancel</button>
            </div>
        </form>
    </div>
@stop

@section('page_scripts')
    <!-- JS libraries: Dropify and ColorisJS -->
    <script src="https://cdn.jsdelivr.net/npm/dropify@0.2.2/dist/js/dropify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@melloware/coloris/dist/coloris.min.js"></script>

    <script>
        $(document).ready(function () {
            // Initialize Dropify for logo and banner uploads
            $('.dropify').dropify();

            // Initialize ColorisJS on elements with class "coloris"
            Coloris({
                el: '.coloris',
                theme: 'auto'
            });

            // Copy booking link to clipboard
            $('#copy-link').on('click', function () {
                var slug = $('#company-slug').val().trim();
                var baseUrl = "{{ route('booking.company', '') }}/";
                var fullUrl = baseUrl + slug;
                if (slug !== '') {
                    navigator.clipboard.writeText(fullUrl).then(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Copied!',
                            text: 'Link copied: ' + fullUrl,
                            timer: 1500,
                            showConfirmButton: false
                        });
                    }).catch(function (err) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Failed to copy link.'
                        });
                        console.error('Clipboard error:', err);
                    });
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Invalid Input',
                        text: 'Please enter a valid company slug.'
                    });
                }
            });

            // Open booking link in a new tab
            $('#open-link').on('click', function () {
                var slug = $('#company-slug').val().trim();
                var baseUrl = "{{ route('booking.company', '') }}/";
                var fullUrl = baseUrl + slug;
                if (slug !== '') {
                    window.open(fullUrl, '_blank');
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Invalid Input',
                        text: 'Please enter a valid company slug.'
                    });
                }
            });
        });
    </script>
@stop