@extends('backend.app')

@section('title', 'System Settings')

@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" />
    <style>
        .setting-card {
            border-radius: 10px;
        }

        .section-title {
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 6px;
        }

        .dropify-wrapper {
            border-radius: 8px;
        }
    </style>
@endpush

@section('content')
    <div class="app-content content">
        <div class="card setting-card">
            <div class="card-header">
                <h4 class="card-title mb-0">Company Information/Setting</h4>
            </div>

            <div class="card-body">
                <form method="POST" action="{{ route('system.setting.update') }}" enctype="multipart/form-data">
                    @csrf

                    {{-- Branding --}}
                    <div class="section-title">Branding</div>
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label class="form-label">Logo</label>
                            <input type="file" name="logo" class="dropify"
                                data-default-file="{{ asset($setting->logo ?? '') }}">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Favicon</label>
                            <input type="file" name="favicon" class="dropify"
                                data-default-file="{{ asset($setting->favicon ?? '') }}">
                        </div>
                    </div>

                    {{-- Basic Info --}}
                    <div class="section-title">Basic Information</div>
                    <div class="row">
                        <div class="col-md-6 mt-3">
                            <label class="form-label">Company Name</label>
                            <input type="text" name="company_name" class="form-control"
                                value="{{ $setting->company_name }}">
                        </div>
                        <div class="col-md-6 mt-3">
                            <label class="form-label">Website URL</label>
                            <input type="text" name="website_url" class="form-control"
                                value="{{ $setting->website_url }}">
                        </div>
                    </div>

                    {{-- Contact Info --}}
                    <div class="section-title mt-4">Contact Information</div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="phone_number"
                                    value="{{ $setting->phone_number }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" value="{{ $setting->email }}">
                        </div>
                    </div>

                    {{-- App Store Links --}}
                    <div class="section-title mt-4">App Store Links</div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">Google Play Store Link</label>
                            <input type="url" name="google_play_link" class="form-control"
                                placeholder="https://play.google.com/..." value="{{ $setting->google_play_link }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Apple App Store Link</label>
                            <input type="url" name="apple_store_link" class="form-control"
                                placeholder="https://apps.apple.com/..." value="{{ $setting->apple_store_link }}">
                        </div>
                    </div>

                    {{-- Company Contact --}}
                    <div class="section-title mt-4">Company Contact</div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">Hotline</label>
                            <input type="text" name="hotline" class="form-control" placeholder="+880 XXXXXXXX"
                                value="{{ $setting->hotline }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Company Address</label>
                            <input type="text" name="address" class="form-control" placeholder="Company address"
                                value="{{ $setting->address }}">
                        </div>
                    </div>

                    {{-- Social Media --}}
                    <div class="section-title mt-4">Social Media</div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label">Facebook</label>
                            <input type="url" name="facebook" class="form-control"
                                placeholder="https://facebook.com/..." value="{{ $setting->facebook }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Twitter (X)</label>
                            <input type="url" name="twitter" class="form-control"
                                placeholder="https://twitter.com/..." value="{{ $setting->twitter }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">LinkedIn</label>
                            <input type="url" name="linkedin" class="form-control"
                                placeholder="https://linkedin.com/..." value="{{ $setting->linkedin }}">
                        </div>

                        <div class="col-md-4 mt-3">
                            <label class="form-label">YouTube</label>
                            <input type="url" name="youtube" class="form-control"
                                placeholder="https://youtube.com/..." value="{{ $setting->youtube }}">
                        </div>

                        <div class="col-md-4 mt-3">
                            <label class="form-label">Instagram</label>
                            <input type="url" name="instagram" class="form-control"
                                placeholder="https://instagram.com/..." value="{{ $setting->instagram }}">
                        </div>

                        <div class="col-md-4 mt-3">
                            <label class="form-label">Threads</label>
                            <input type="url" name="threads" class="form-control"
                                placeholder="https://threads.net/..." value="{{ $setting->threads }}">
                        </div>

                        <div class="col-md-4 mt-3">
                            <label class="form-label">Snapchat</label>
                            <input type="url" name="snapchat" class="form-control"
                                placeholder="https://snapchat.com/..." value="{{ $setting->snapchat }}">
                        </div>
                    </div>


                    {{-- Submit --}}
                    <div class="text-end mt-4">
                        <button class="btn btn-primary px-4">
                            <i class="fas fa-save me-1"></i> Update Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script>
        $('.dropify').dropify({
            messages: {
                default: 'Drag & drop or click',
                replace: 'Replace',
                remove: 'Remove',
                error: 'Oops, something wrong'
            }
        });
    </script>
@endpush