@extends('admin.templates.layout')

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0 d-flex align-items-center">
                <h5 class="card-title mb-0 flex-grow-1">General Settings</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.settings.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-3">
                            <div class="nav flex-column nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                <a class="nav-link mb-2 active" id="v-pills-general-tab" data-bs-toggle="pill" href="#v-pills-general" role="tab" aria-controls="v-pills-general" aria-selected="true">General Info</a>
                                <a class="nav-link mb-2" id="v-pills-social-tab" data-bs-toggle="pill" href="#v-pills-social" role="tab" aria-controls="v-pills-social" aria-selected="false">Social Media</a>
                                <a class="nav-link mb-2" id="v-pills-links-tab" data-bs-toggle="pill" href="#v-pills-links" role="tab" aria-controls="v-pills-links" aria-selected="false">App Links</a>
                                <a class="nav-link mb-2" id="v-pills-assets-tab" data-bs-toggle="pill" href="#v-pills-assets" role="tab" aria-controls="v-pills-assets" aria-selected="false">Logo & Assets</a>
                            </div>
                        </div><!-- end col -->
                        <div class="col-md-9">
                            <div class="tab-content text-muted mt-4 mt-md-0" id="v-pills-tabContent">
                                <!-- General Info -->
                                <div class="tab-pane fade show active" id="v-pills-general" role="tabpanel" aria-labelledby="v-pills-general-tab">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Site Name</label>
                                            <input type="text" class="form-control" name="site_name" value="{{ $settings->site_name ?? '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Site Email</label>
                                            <input type="email" class="form-control" name="site_email" value="{{ $settings->site_email ?? '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Support Email</label>
                                            <input type="email" class="form-control" name="support_email" value="{{ $settings->support_email ?? '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Contact Number</label>
                                            <input type="text" class="form-control" name="contact_number" value="{{ $settings->contact_number ?? '' }}">
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label">Operating Hours (Summary)</label>
                                            <input type="text" class="form-control" name="operating_hours" value="{{ $settings->operating_hours ?? '' }}" placeholder="e.g. 09:00 AM - 06:00 PM, All Days">
                                            <small class="text-muted">This will be displayed as the general business time.</small>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label">Address</label>
                                            <textarea class="form-control" name="address" rows="3">{{ $settings->address ?? '' }}</textarea>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Social Media -->
                                <div class="tab-pane fade" id="v-pills-social" role="tabpanel" aria-labelledby="v-pills-social-tab">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label"><i class="ri-facebook-fill align-bottom me-1"></i> Facebook Link</label>
                                            <input type="url" class="form-control" name="facebook_link" value="{{ $settings->facebook_link ?? '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label"><i class="ri-instagram-line align-bottom me-1"></i> Instagram Link</label>
                                            <input type="url" class="form-control" name="instagram_link" value="{{ $settings->instagram_link ?? '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label"><i class="ri-linkedin-box-fill align-bottom me-1"></i> LinkedIn Link</label>
                                            <input type="url" class="form-control" name="linkedin_link" value="{{ $settings->linkedin_link ?? '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label"><i class="ri-twitter-x-fill align-bottom me-1"></i> Twitter Link</label>
                                            <input type="url" class="form-control" name="twitter_link" value="{{ $settings->twitter_link ?? '' }}">
                                        </div>
                                    </div>
                                </div>

                                <!-- App Links -->
                                <div class="tab-pane fade" id="v-pills-links" role="tabpanel" aria-labelledby="v-pills-links-tab">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label"><i class="ri-app-store-line align-bottom me-1"></i> App Store Link</label>
                                            <input type="url" class="form-control" name="app_store_link" value="{{ $settings->app_store_link ?? '' }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label"><i class="ri-google-play-line align-bottom me-1"></i> Play Store Link</label>
                                            <input type="url" class="form-control" name="play_store_link" value="{{ $settings->play_store_link ?? '' }}">
                                        </div>
                                    </div>
                                </div>

                                <!-- Assets -->
                                <div class="tab-pane fade" id="v-pills-assets" role="tabpanel" aria-labelledby="v-pills-assets-tab">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Logo</label>
                                            <input type="file" class="form-control" name="logo" accept="image/*">
                                            @if($settings && $settings->logo)
                                                <div class="mt-2">
                                                    <img src="{{ get_image_url($settings->logo, 'settings') }}" alt="Logo" class="img-thumbnail" style="height: 50px;">
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Favicon</label>
                                            <input type="file" class="form-control" name="favicon" accept="image/*">
                                            @if($settings && $settings->favicon)
                                                <div class="mt-2">
                                                    <img src="{{ get_image_url($settings->favicon, 'settings') }}" alt="Favicon" class="img-thumbnail" style="height: 32px;">
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- end col -->
                    </div><!-- end row -->
                    
                    <div class="row mt-4">
                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-primary px-4">Save Settings</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@stop