@extends('Company.layout.master')
@section('title',"Requirement")
@section('page_name',"Requirement")

@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.req.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="row">

                                <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> Requirement
                                    </label>
                                    <textarea name="requirement" id="summernote_info">{!! $data ? $data->requirement : ''  !!}</textarea>
                                    @error('requirement')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>

                            <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>
                                    @if($data!=null)
                                    <div class="col-md-6">

                                        <img style="height: 150px;width:300px;" src="{{asset('storage/'.$data->image)}}">

                                    </div>
                                    @endif
                                </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