@extends("website.service-providers.layouts.layout")
@section('title', "Services")
@section("body")
<link rel="stylesheet" href="{{ asset('css/sp.css') }}">

<!-- Include Toastr CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<style>
    .skilltext p {
        color : #ffffff !important;
    }
</style>
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Skill</li>
            </ol>
        </nav>
    </div>
</section>

<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")

            <div class="main-content">
                <div class="main-content-wrapper lg-width skills">
                    <div class="skills-header-items d-flex justify-content-between">
                        <h3 class="heading-text">{{$subCategoryName}}</h3>
                        <!-- <a type="button" data-bs-toggle="modal" data-bs-target="#view-skill" class="blue-color text-decoration-underline"> -->
                            <a type="button" href="{{ route('achievement.all.skill') }}" class="blue-color text-decoration-underline">
                            Back
                        </a>
                    </div>

                    <div class="project-block">
                        <div class="project-block-item achievement">
                            <div class="project-linking d-flex flex-column gap-12px">

                            <div class="tips-block d-flex gap-4px skilltext">
                                        <div class="tips-block-items" >
                                            <span class="payment-tips align-items-start" style="background-color:#007aff;color:#ffffff !important">
                                                <img src="{{ asset('webAssets/assets/images/123.png') }}" alt="tips">
                                                <p>{!! $CategoryContentLabel ?? 'No additional tips available.' !!}</p>
                                            </span>
                                        </div>                                   
                                    </div>

                                    <div class="work-hour-details mt-3">
                                        <h4 class="head font-size-16 text-start">Typical scope of work</h4>
                                        <p class="para text-start">{!! $scope_of_work ?? 'Scope of work details are not available at the moment.' !!}</p>
                                    </div>

                                    <div class="work-hour-details mt-3">
                                        <h4 class="head font-size-16 text-start">Recommended tools to bring</h4>
                                        @if(!empty($tools) && $tools->isNotEmpty())
                                            <ul class="text-start">
                                                @foreach($tools as $tool)
                                                    <li>{{ $tool }}</li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <p class="para text-start">No tools required or tool list is unavailable.</p>
                                        @endif
                                    </div>

                                <div class="sign-up-form">
                                    <form action="{{ route('achievement.saveSkills') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf

                                        <input type="hidden" name="category" id="" value="{{$grp_id ?? ''}}">
                                        <input type="hidden" name="sub_category_id" id="" value="{{$ctg_id ?? ''}}">
                                        <div class="work-hour-details mt-3">
                                            <h4 class="head font-size-16 text-start">Add your hourly rate and minimum
                                                work hours</h4>
                                            <p class="para text-start">{!!$subCategory->description!!}</p>
                                        </div>

                                        <div class="rate-slider d-flex flex-column gap-4px">
                                            <h4 class="head font-size-16 text-start">Your Rate</h4>
                                            <div class="swiper mySwiper rate mt-0">
                                                <div class="swiper-wrapper" id="rate-slider-container">
                                                    <input type="hidden" id="selected-price" name="rate" value="">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="service-provider-select">
                                            <div class="select">
                                                <h6 class="heading text-start">Minimum hours</h6>
                                                <select class="form-select skill form-select-lg mb-3" name="min_hours"
                                                    aria-label="Large select example">
                                                    <option selected>Choose Minimum hours</option>
                                                    @for ($i = 1; $i <= 12; $i++)
                                                        <option value="{{ $i }}">{{ $i }}
                                                        </option>
                                                    @endfor
                                                </select>
                                            </div>
                                            <div class="form-name-field flex-column gap-8px">
                                                <h6 class="heading text-start">Skill & Experience</h6>
                                                <textarea class="form-control" name="skill_description"
                                                    id="exampleFormControlTextarea1" rows="3"
                                                    placeholder="Enter Here"></textarea>
                                            </div>

                                            <div class="select">
                                                <h4 class="head font-size-16 text-start">Choose your Certificates &
                                                    License</h4>
                                                <select class="form-select skill form-select-lg mb-3" name="doc_type"
                                                    aria-label="Large select example">
                                                    <option selected>Choose Certificates & License</option>
                                                    <option value="1">License1</option>
                                                    <option value="2">License2</option>
                                                    <option value="3">License3</option>
                                                </select>
                                            </div>
                                            <div class="form-name-field flex-column gap-8px">
                                                <h6 class="heading text-start">License number</h6>
                                                <input type="text" class="form-control" name="doc_number"
                                                    placeholder="Enter License number" />
                                            </div>

                                            <!-- File Uploads -->


                                            
                                            <!-- <div class="upload-file">
                                                <div class="upload-file-text-col">
                                                    <h6 class="heading text-start">Upload Front Side</h6>
                                                    <div class="upload-input front-side">
                                                        <input class="form-control inputdesigns" type="file"
                                                            name="doc_image">
                                                    </div>
                                                </div>
                                                <div class="upload-file-text-col">
                                                    <h6 class="heading text-start">Add Work Images</h6>
                                                    <div class="upload-input work-images">
                                                        <input class="form-control inputdesigns" type="file"
                                                            name="work_images[]" multiple>
                                                    </div>
                                                </div>
                                            </div> -->


                                            <div class="upload-file provider-multi-img-selection">
                                                <div class="upload-file-text-col">
                                                    <h6 class="heading text-start">Upload Front Side</h6>
                                                    <div class="upload-input front-side">
                                                        <label for="frontSideInput" class="custom-upload-button">
                                                            Upload Front Side Image
                                                        </label>
                                                        <input id="frontSideInput" class="form-control inputdesigns"
                                                            type="file" name="doc_image" multiple>
                                                            <div id="frontSideUploadedImagesContainer"></div>
                                                    </div>
                                                </div>
                                                <div class="upload-file-text-col">
                                                    <h6 class="heading text-start">Add Work Images</h6>
                                                    <div class="upload-input front-side">
                                                        <label for="workImagesInput" class="custom-upload-button">
                                                        Upload Work Images
                                                        </label>
                                                        <!-- Changed name from "doc_image" to "work_images[]" -->
                                                        <input id="workImagesInput" class="form-control inputdesigns"
                                                            type="file" name="work_images[]" multiple>
                                                            <div id="workImagesUploadedImagesContainer"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Save Skill</button>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>


            
        </div>
    </div>
</section>

<!-- Include Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
    // Display Toastr success message if session contains 'success'
    @if(session('success'))
        toastr.success("{{ session('success') }}");
    @endif

    // Optional: Configure Toastr options
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>



<!-- For accepting multiple images -->

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const frontSideInput = document.getElementById('frontSideInput');
        const workImagesInput = document.getElementById('workImagesInput');
        const frontSideUploadedImagesContainer = document.getElementById('frontSideUploadedImagesContainer');
        const workImagesUploadedImagesContainer = document.getElementById('workImagesUploadedImagesContainer');

        frontSideInput.addEventListener('change', handleFileSelect);
        workImagesInput.addEventListener('change', handleFileSelect);

        function handleFileSelect(e) {
            const files = e.target.files;
            const container = e.target.id === 'frontSideInput' ? frontSideUploadedImagesContainer : workImagesUploadedImagesContainer;

            if (files.length > 0) {
                Array.from(files).forEach(file => {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        const imgContainer = document.createElement('div');
                        imgContainer.classList.add('uploaded-image-container');

                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.classList.add('uploaded-image');

                        // Create close button for the image
                        const closeButton = document.createElement('button');
                        closeButton.innerHTML = '×';
                        closeButton.classList.add('close-button');
                        closeButton.addEventListener('click', () => {
                            imgContainer.remove();
                        });

                        imgContainer.appendChild(img);
                        imgContainer.appendChild(closeButton);
                        container.appendChild(imgContainer);
                    }

                    reader.readAsDataURL(file);
                });
            }
        }
    });

</script>

@endsection