@extends('backend.layout.app')

@section('content')
    @push('css')
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
    @endpush
    <div class="page-content">
        <div class="container-fluid">

            <h4 class="mb-4">General Settings</h4>

            <form action="{{ route('admin.setting.updateGeneral') }}" method="POST">
                @csrf

                <!-- Basic Info -->
                <div class="card mb-4">
                    <div class="card-header">
                        <strong>Basic Info</strong>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="app_name" class="form-label">App Name</label>
                                <input type="text" name="app_name" id="app_name" class="form-control"
                                    placeholder="Enter App Name" value="{{ $setting->app_name }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="default_language" class="form-label">Default Language</label>
                                <select name="default_language" id="default_language" class="form-select">
                                    <option value="bn" {{$setting->default_language == 'bn' ? 'selected' : ''}}>Bangla
                                    </option>
                                    <option value="en" {{$setting->default_language == 'en' ? 'selected' : '' }}>English</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="home_page_title" class="form-label">Home Page Title</label>
                                <input type="text" name="home_page_title" id="home_page_title" class="form-control"
                                    placeholder="Enter Home Page Title" value="{{ $setting->home_page_title }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="title" class="form-label">Title</label>
                                <input type="text" name="title" id="title" class="form-control" placeholder="Enter Title"
                                    value="{{ $setting->title }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="tagline" class="form-label">Tagline</label>
                                <input type="text" name="tagline" id="tagline" class="form-control"
                                    placeholder="Enter Tagline" value="{{ $setting->tagline }}">
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Contact Info -->
                <div class="card mb-4">
                    <div class="card-header">
                        <strong>Contact Information</strong>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="whatsapp_number" class="form-label">WhatsApp Number</label>
                                <input type="text" name="whatsapp_number" id="whatsapp_number" class="form-control"
                                    placeholder="Enter WhatsApp Number" value="{{ $setting->whatsapp_number }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="mobile_number" class="form-label">Mobile Number</label>
                                <input type="text" name="mobile_number" id="mobile_number" class="form-control"
                                    placeholder="Enter Mobile Number" value="{{ $setting->mobile_number }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="mobile" class="form-label">Alternate Mobile</label>
                                <input type="text" name="mobile" id="mobile" class="form-control"
                                    placeholder="Enter Alternate Mobile" value="{{ $setting->mobile }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="phone_secondary" class="form-label">Secondary Phone</label>
                                <input type="text" name="phone_secondary" id="phone_secondary" class="form-control"
                                    placeholder="Enter Secondary Phone" value="{{ $setting->phone_secondary }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" name="email" id="email" class="form-control" placeholder="Enter Email"
                                    value="{{ $setting->email }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="support_email" class="form-label">Support Email</label>
                                <input type="email" name="support_email" id="support_email" class="form-control"
                                    placeholder="Enter Support Email" value="{{ $setting->support_email }}">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Address & Trade Info -->
                <div class="card mb-4">
                    <div class="card-header">
                        <strong>Address & Trade Info</strong>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="address" class="form-label">Address</label>
                                <textarea name="address" id="address" class="form-control" rows="2"
                                    placeholder="Enter Address">{{ $setting->address }}</textarea>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="city" class="form-label">City</label>
                                <input type="text" name="city" id="city" class="form-control" placeholder="Enter City"
                                    value="{{ $setting->city }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="state" class="form-label">State</label>
                                <input type="text" name="state" id="state" class="form-control" placeholder="Enter State"
                                    value="{{ $setting->state }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="country" class="form-label">Country Code (2 letters)</label>
                                <input type="text" name="country" id="country" class="form-control"
                                    placeholder="e.g. BD, US" value="{{ $setting->country }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="zip_code" class="form-label">ZIP Code</label>
                                <input type="text" name="zip_code" id="zip_code" class="form-control"
                                    placeholder="Enter ZIP Code" value="{{ $setting->zip_code }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="google_map_link" class="form-label">Google Map Link</label>
                                <input type="text" name="google_map_link" id="google_map_link" class="form-control"
                                    placeholder="Enter Google Map Embedded Link" value="{{ $setting->google_map_link }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="trade_license" class="form-label">Trade License</label>
                                <input type="text" name="trade_license" id="trade_license" class="form-control"
                                    placeholder="Enter Trade License" value="{{ $setting->trade_license }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="office_hours" class="form-label">Office Hours</label>
                                <input type="text" name="office_hours" id="office_hours" class="form-control"
                                    placeholder="Enter Office Hours" value="{{ $setting->office_hours }}">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Theme Colors & Footer Details -->
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <strong class="text-primary"><i class="bi bi-palette-fill me-1"></i> Website Theme Colors & Footer</strong>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <!-- Primary Color -->
                            <div class="col-md-3 mb-3">
                                <label for="primary_color" class="form-label fw-bold">Primary Color</label>
                                <div class="input-group shadow-sm">
                                    <input type="color" class="form-control form-control-color border-end-0" id="primary_color_picker" 
                                        value="{{ $setting->primary_color ?: '#1b74e4' }}" 
                                        style="max-width: 50px; padding: 3px; height: 40px; cursor: pointer;"
                                        title="Choose Primary Color"
                                        oninput="document.getElementById('primary_color').value = this.value">
                                    <input type="text" name="primary_color" id="primary_color" class="form-control"
                                        placeholder="#1b74e4" value="{{ $setting->primary_color ?: '#1b74e4' }}"
                                        oninput="if(/^#[0-9A-Fa-f]{6}$/.test(this.value)) document.getElementById('primary_color_picker').value = this.value">
                                </div>
                                <small class="text-muted">Main buttons, active links, badges</small>
                            </div>

                            <!-- Secondary Color -->
                            <div class="col-md-3 mb-3">
                                <label for="secondary_color" class="form-label fw-bold">Secondary Color</label>
                                <div class="input-group shadow-sm">
                                    <input type="color" class="form-control form-control-color border-end-0" id="secondary_color_picker" 
                                        value="{{ $setting->secondary_color ?: '#0b5ed7' }}" 
                                        style="max-width: 50px; padding: 3px; height: 40px; cursor: pointer;"
                                        title="Choose Secondary Color"
                                        oninput="document.getElementById('secondary_color').value = this.value">
                                    <input type="text" name="secondary_color" id="secondary_color" class="form-control"
                                        placeholder="#0b5ed7" value="{{ $setting->secondary_color ?: '#0b5ed7' }}"
                                        oninput="if(/^#[0-9A-Fa-f]{6}$/.test(this.value)) document.getElementById('secondary_color_picker').value = this.value">
                                </div>
                                <small class="text-muted">Hover states, accents, gradients</small>
                            </div>

                            <!-- Footer Text -->
                            <div class="col-md-3 mb-3">
                                <label for="footer_text" class="form-label fw-bold">Footer Text (Copyright)</label>
                                <input type="text" name="footer_text" id="footer_text" class="form-control"
                                    placeholder="e.g. © 2026 Study Vision X" value="{{ $setting->footer_text }}">
                                <small class="text-muted">Copyright text at bottom</small>
                            </div>

                            <!-- Footer Description -->
                            <div class="col-md-3 mb-3">
                                <label for="footer_description" class="form-label fw-bold">Footer Description</label>
                                <input type="text" name="footer_description" id="footer_description" class="form-control"
                                    placeholder="Footer short description" value="{{ $setting->footer_description }}">
                                <small class="text-muted">Short about text in footer</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Maintenance Mode -->
                <div class="card mb-4">
                    <div class="card-header">
                        <strong>Maintenance Mode</strong>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <input type="hidden" name="maintenance_mode_form" value="1">
                            <div class="col-md-2 mb-3 mt-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="maintenance_mode"
                                        id="maintenance_mode" value="1" {{ $setting->maintenance_mode ? 'checked' : '' }}>
                                    <label class="form-check-label" for="maintenance_mode">Enable</label>
                                </div>
                            </div>
                            <div class="col-md-10 mb-3">
                                <label for="maintenance_message" class="form-label">Maintenance Message</label>
                                <input type="text" name="maintenance_message" id="maintenance_message" class="form-control"
                                    placeholder="We are currently down for maintenance"
                                    value="{{ $setting->maintenance_message }}">
                            </div>
                        </div>
                    </div>
                </div>



                <!-- Update Button -->
                <div class="text-end mb-4">
                    <button type="submit" class="btn btn-primary btn-lg">Update Settings</button>
                </div>

            </form>
        </div>
    </div>

    @push('js')
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                document.querySelectorAll('.pickr').forEach((el) => {
                    const targetId = el.dataset.target;
                    const input = document.getElementById(targetId);
                    console.log(targetId)

                    const pickr = Pickr.create({
                        el,
                        theme: 'classic',
                        default: input.value || '#000000',
                        components: {
                            preview: true,
                            opacity: true,
                            hue: true,
                            interaction: {
                                hex: true,
                                rgba: true,
                                input: true,
                                save: true
                            }
                        }
                    });

                    // Pickr → Input (on save or final change)
                    pickr.on('change', (color) => {
                        input.value = color.toHEXA().toString();
                    });

                    pickr.on('save', (color) => {
                        if (color) input.value = color.toHEXA().toString();
                        pickr.hide(); // auto close on save
                    });

                    // Input → Pickr
                    input.addEventListener('input', (e) => {
                        pickr.setColor(e.target.value);
                    });
                });
            });
        </script>
    @endpush
@endsection