@extends('layouts.dashboard')

@section('title', $pageTitle ?? (isset($systemSetting) ? 'Edit System Settings' : 'Create System Settings'))

@section('page_header')
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="m-b-10">{{ $pageTitle ?? (isset($systemSetting) ? 'Edit System Settings' : 'Create System Settings') }}</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('system-settings.index') }}">System Settings</a></li>
                <li class="breadcrumb-item">{{ isset($systemSetting) ? 'Edit' : 'Create' }}</li>
            </ul>
        </div>
    </div>
@endsection

@section('page_content')
    @if (session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="card">
        <div class="card-body">
            @php
                $isEdit = isset($systemSetting);
                $primaryValue = old('primary_color', $systemSetting->primary_color ?? '#3454d1');
                $secondaryValue = old('secondary_color', $systemSetting->secondary_color ?? '#6b7280');
            @endphp

            <form method="POST" action="{{ route('system-settings.save') }}" enctype="multipart/form-data">
                @csrf

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Company Name</label>
                        <input type="text" name="name" class="form-control" required
                            value="{{ old('name', $systemSetting->name ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control"
                            value="{{ old('email', $systemSetting->email ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control"
                            value="{{ old('phone', $systemSetting->phone ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Website</label>
                        <input type="url" name="website" class="form-control"
                            value="{{ old('website', $systemSetting->website ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Primary Color</label>
                        <div class="color-picker-field">
                            <input type="color" name="primary_color" class="form-control form-control-color js-color-input"
                                value="{{ $primaryValue }}">
                            <input type="text" class="form-control js-color-text" value="{{ $primaryValue }}" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Secondary Color</label>
                        <div class="color-picker-field">
                            <input type="color" name="secondary_color"
                                class="form-control form-control-color js-color-input"
                                value="{{ $secondaryValue }}">
                            <input type="text" class="form-control js-color-text" value="{{ $secondaryValue }}"
                                readonly>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Address</label>
                        <input type="text" name="address" class="form-control"
                            value="{{ old('address', $systemSetting->address ?? '') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Logo</label>
                        <div class="file-uploader">
                            <div class="file-preview" data-default="{{ $isEdit && $systemSetting->logo ? asset('storage/' . $systemSetting->logo) : '' }}">
                                <span>Drop logo here or click to upload</span>
                            </div>
                            <input type="file" name="logo" class="file-input js-file-input" accept="image/*">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Favicon</label>
                        <div class="file-uploader">
                            <div class="file-preview" data-default="{{ $isEdit && $systemSetting->favicon ? asset('storage/' . $systemSetting->favicon) : '' }}">
                                <span>Drop favicon here or click to upload</span>
                            </div>
                            <input type="file" name="favicon" class="file-input js-file-input" accept="image/*">
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2 mt-4">
                    <button type="submit" class="btn btn-primary">
                        {{ $isEdit ? 'Update Settings' : 'Save Settings' }}
                    </button>
                    <a href="{{ route('system-settings.index') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .color-picker-field {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: 10px;
            align-items: center;
        }

        .form-control-color {
            height: 44px;
            padding: 4px;
            border-radius: 10px;
        }

        .file-uploader {
            position: relative;
        }

        .file-input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }

        .file-preview {
            border: 1px dashed #cbd5f5;
            border-radius: 12px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            color: #6b7280;
            font-size: 13px;
            text-align: center;
            padding: 12px;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }

        .file-preview.has-image {
            color: transparent;
            border-style: solid;
            background-color: #fff;
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.js-color-input').forEach(function(input) {
                const text = input.closest('.color-picker-field')?.querySelector('.js-color-text');
                if (text) {
                    input.addEventListener('input', function() {
                        text.value = input.value;
                    });
                }
            });

            document.querySelectorAll('.file-preview').forEach(function(preview) {
                const fileInput = preview.closest('.file-uploader')?.querySelector('.js-file-input');
                const defaultImage = preview.getAttribute('data-default');
                if (defaultImage) {
                    preview.style.backgroundImage = `url('${defaultImage}')`;
                    preview.classList.add('has-image');
                }
                if (fileInput) {
                    fileInput.addEventListener('change', function() {
                        const file = fileInput.files && fileInput.files[0];
                        if (!file) return;
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            preview.style.backgroundImage = `url('${e.target.result}')`;
                            preview.classList.add('has-image');
                        };
                        reader.readAsDataURL(file);
                    });
                }
            });
        });
    </script>
@endpush