@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>
                    </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="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-6 mb-3">
                                <label for="address" class="form-label">Address</label>
                                <textarea name="address" id="address" class="form-control" rows="3" placeholder="Enter Address">{{ $setting->address }}</textarea>
                            </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>



                <!-- 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