@extends('layouts.admin-layout')
@section('title', 'All Contact User')
@section('content')
    <div class="container mt-4">
        <form action="{{ route('admin.setting.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <!-- Title -->
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input type="text" class="form-control" name="title" value="{{ old('title', $content->title ?? '') }}" placeholder="Enter site title">
                        @error('title')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Copyright Content -->
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="copy_right_content">Copyright Content</label>
                        <input type="text" class="form-control" name="copy_right_content" value="{{ old('copy_right_content', $content->copy_right_content ?? '') }}" placeholder="Enter copyright content">
                        @error('copy_right_content')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Email & Contact Number -->
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" name="email" value="{{ old('email', $content->email ?? '') }}" placeholder="Enter email">
                        @error('email')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="contact_number">Contact Number</label>
                        <input type="text" class="form-control" name="contact_number" value="{{ old('contact_number', $content->contact_number ?? '') }}" placeholder="Enter contact number">
                        @error('contact_number')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Main Logo -->
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="mainLogoImageInput">Main Logo</label><br>
                        <input type="file" class="form-control visually-hidden" name="icon" id="mainLogoImageInput" accept="image/*">
                        <label for="mainLogoImageInput" class="file-input-label btn btn-outline-secondary">
                            <i class="fas fa-camera"></i> Choose file
                        </label>
                        <div class="image-preview mt-2">
                            <img id="mainLogoImagePreview" src="{{ isset($data) ? $data->getFirstMediaUrl('icon') : asset('upload/No-Image.png') }}" alt="Logo Preview" style="width: 100%; max-width: 300px; height: auto;">
                        </div>
                        @error('main_logo')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Favicon -->
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="faviconImageInput">Favicon</label><br>
                        <input type="file" class="form-control visually-hidden" name="favicon" id="faviconImageInput" accept="image/*">
                        <label for="faviconImageInput" class="file-input-label btn btn-outline-secondary">
                            <i class="fas fa-camera"></i> Choose file
                        </label>
                        <div class="image-preview mt-2">
                            <img id="faviconImagePreview" src="{{ isset($data) ? $data->getFirstMediaUrl('favicon') : asset('upload/No-Image.png') }}" alt="Favicon Preview" style="width: 100px; height: auto;">
                        </div>
                        @error('favicon')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Social Media Links -->
                <div class="col-md-12">
                    <h5>Social Media Links</h5>
                    <div class="form-group">
                        <label for="facebook">Facebook</label>
                        <input type="text" class="form-control" name="facebook" value="{{ old('facebook', $content->facebook ?? '') }}" placeholder="Enter Facebook link">
                        @error('facebook')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
{{--                    <div class="form-group">--}}
{{--                        <label for="youtube">YouTube</label>--}}
{{--                        <input type="text" class="form-control" name="youtube" value="{{ old('youtube', $content->youtube ?? '') }}" placeholder="Enter YouTube link">--}}
{{--                        @error('youtube')--}}
{{--                        <div class="text-danger">{{ $message }}</div>--}}
{{--                        @enderror--}}
{{--                    </div>--}}
                    <div class="form-group">
                        <label for="linkedin">LinkedIn</label>
                        <input type="text" class="form-control" name="linkedin" value="{{ old('linkid', $content->linkid ?? '') }}" placeholder="Enter LinkedIn link">
                        @error('linkid')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="twitter">Twitter</label>
                        <input type="text" class="form-control" name="twitter" value="{{ old('twitter', $content->twitter ?? '') }}" placeholder="Enter Twitter link">
                        @error('twitter')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="instagram">Instagram</label>
                        <input type="text" class="form-control" name="instagram" value="{{ old('instagram', $content->instagram ?? '') }}" placeholder="Enter Instagram link">
                        @error('instagram')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Footer Description -->
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="footer_description">Footer Description</label>
                        <textarea class="form-control" name="footer_description" placeholder="Enter footer description">{{ old('footer_description', $content->footer_description ?? '') }}</textarea>
                        @error('footer_description')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Location -->
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="location">Location</label>
                        <input type="text" class="form-control" name="location" value="{{ old('location', $content->location ?? '') }}" placeholder="Enter location">
                        @error('location')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Timing Mon to Fri -->
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="timing_mon_to_fri">Timing (Mon-Fri)</label>
                        <input type="text" class="form-control" name="timing_mon_to_fri" value="{{ old('timing_mon_to_fri', $content->timing_mon_to_fri ?? '') }}" placeholder="Enter Mon-Fri timings">
                        @error('timing_mon_to_fri')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Timing Sat -->
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="timing_sat">Timing (Sat)</label>
                        <input type="text" class="form-control" name="timing_sat" value="{{ old('timing_sat', $content->timing_sat ?? '') }}" placeholder="Enter Sat timings">
                        @error('timing_sat')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Appointment Heading -->
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="appointment_heading">Appointment Heading</label>
                        <input type="text" class="form-control" name="appointment_heading" value="{{ old('appointment_heading', $content->appointment_heading ?? '') }}" placeholder="Enter appointment heading">
                        @error('appointment_heading')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        function previewImage(input, previewElementId) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById(previewElementId).src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }

        document.getElementById('mainLogoImageInput').addEventListener('change', function() {
            previewImage(this, 'mainLogoImagePreview');
        });

        document.getElementById('faviconImageInput').addEventListener('change', function() {
            previewImage(this, 'faviconImagePreview');
        });
    </script>
@endsection