@extends('Company.layout.master')
@section('title',"INTRO")
@section('page_name',"My Intro")

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

    <style>
        /* Custom Styling for a Professional Look */
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
        }
        .card-header {
            background: linear-gradient(45deg, #4e73df, #224abe);
            color: white;
            border-radius: 12px 12px 0 0 !important;
            padding: 1.5rem;
        }
        .form-label {
            font-weight: 600;
            color: #5a5c69;
            margin-bottom: 0.5rem;
        }

        /* Image Upload Styling */
        .image-preview-container {
            width: 100%;
            height: 200px;
            border: 2px dashed #d1d3e2;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fc;
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
            cursor: pointer;
        }
        .image-preview-container:hover {
            border-color: #4e73df;
            background-color: #f0f4ff;
        }
        .image-preview-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: none;
        }
        .upload-text-wrapper {
            text-align: center;
            color: #858796;
        }

        /* Summernote Customization to match Bootstrap 5 inputs */
        .note-editor.note-frame {
            border-radius: 6px;
            border-color: #ced4da;
        }
    </style>
@endpush

@section('content')
    <div class="container mt-4 mb-5">

        {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{session('success')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
                <i class="fas fa-times-circle me-2"></i> {{session('error')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card">


                    <div class="card-body p-4">
                        <form action="{{route('consultant.intro.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf

                            {{-- 1. Title Field --}}
                            <div class="mb-4">
                                <label for="title" class="form-label">Introduction Title</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light"><i class="bi bi-person"></i></span>
                                    <input type="text" class="form-control form-control-lg" id="title" name="title" placeholder=" Welcome to Our Digital Hub" value="{{ $data ? $data->title : '' }}" required>
                                </div>
                                @error('title')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- 2. Two Columns for Summernote Editors --}}
                            <div class="row">
                                {{-- Company Info --}}
                                <div class="col-md-12 mb-4">
                                    <label for="summernote_info" class="form-label">
                                        <i class="bi bi-info-circle me-1 text-primary"></i> Information
                                    </label>
                                    <textarea name="info" id="summernote_info">{!! $data ? $data->info : ''  !!}</textarea>
                                    @error('info')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Company Description --}}
                                <div class="col-md-12 mb-4">
                                    <label for="summernote_desc" class="form-label">
                                        <i class="fas fa-align-left me-1 text-primary"></i>  Description
                                    </label>
                                    <textarea name="description" id="summernote_desc">{!! $data ? $data->description : ''  !!}</textarea>
                                    @error('description')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- 3. Image Upload Section --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold"><i class="bi bi-image me-1"></i> Dashboard Banner Image</label>
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <input class="form-control" type="file" id="dashboard_image" name="image" accept="image/*" onchange="previewImage(event)">
                                        <div class="small text-muted mt-2">
                                            <ul class="mb-0 ps-3">
                                                <li>Recommended Ratio: 3:1 (e.g., 1200x400px)</li>
                                                <li>Max Size: 2MB</li>
                                                <li>Formats: JPG, PNG, WEBP</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-3 mt-md-0">
                                        {{-- Visual Previewer --}}
                                        <div class="image-preview-container" id="previewContainer" onclick="document.getElementById('dashboard_image').click()">
                                            <div class="upload-text-wrapper" id="uploadText">
                                                <i class="fas fa-cloud-upload-alt fa-3x mb-2 text-gray-300"></i>
                                                <p class="mb-0 small">Preview will appear here</p>
                                            </div>
                                            <img id="imagePreview" src="{{$data?asset('storage/'.$data->image):''}}" alt="Image Preview" />
                                        </div>
                                    </div>
                                </div>
                                @error('image')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <hr class="my-4">

                            <div class="d-flex justify-content-end gap-2">
                                <button type="reset" class="btn btn-outline-secondary">
                                    <i class="fas fa-undo me-1"></i> Reset
                                </button>
                                <button type="submit" class="btn btn-primary px-4 fw-bold">
                                    <i class="bi bi-check me-1"></i> Save & Publish
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- 1. jQuery (Required for Summernote) --}}
    {{-- Remove this line if your master layout already includes jQuery --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    {{-- 2. Summernote JS --}}
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

    <script>
        $(document).ready(function() {
            // Configuration for Summernote
            var summernoteConfig = {
                placeholder: 'Type your content here...',
                tabsize: 2,
                height: 200,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            };

            // Initialize both textareas
            $('#summernote_info').summernote(summernoteConfig);
            $('#summernote_desc').summernote(summernoteConfig);
        });

        // Image Preview Function
        function previewImage(event) {
            var reader = new FileReader();
            var imageField = document.getElementById("imagePreview");
            var textField = document.getElementById("uploadText");
            var container = document.getElementById("previewContainer");

            reader.onload = function(){
                if(reader.readyState == 2){
                    imageField.src = reader.result;
                    imageField.style.display = "block";
                    textField.style.display = "none";
                    container.style.borderColor = "#4e73df";
                    container.style.borderStyle = "solid";
                }
            }

            if(event.target.files[0]) {
                reader.readAsDataURL(event.target.files[0]);
            }
        }

    </script>
@endpush