@extends("website.service-providers.layouts.layout")
@section('title', "Edit Skill")
@section("body")
<link rel="stylesheet" href="{{ asset('css/sp.css') }}">
<style>
    /* .swiper-slide.selected .rate-slider-items {
    } */
    .rate-slider-items .hero.selected {
        background-color: #def7ff !important;
        color: #007BFF;
        border: 1px solid #007BFF !important;
    }
    .swiper-slide.selected .rate-hours {
        font-weight: bold !important;
        color: #007BFF !important;  /* Optional: Change text color for selected slide */
        border: 2px solid #007BFF !important;  /* Highlight selected slide with a border */
        background-color: #f0f8ff !important; 
    }
    
    .selected {
        background-color: #f0f8ff !important;
    }

    /* .selected .rate-hours {  
        border: 2px solid #007bff !important;  
        color: blue !important;  
    } */

    /* .selected .hero {
        color: blue !important; 
    } */

</style>
<!-- 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>

<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">Edit 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">Edit Skill</h3>
                    </div>

                    <div class="project-block">
                        <div class="project-block-item achievement">
                            <div class="project-linking d-flex flex-column gap-12px">
                                <div class="sign-up-form">
                                    <form action="{{ route('achievement.skill.update', $skill['skill_id']) }}" method="POST"
                                        enctype="multipart/form-data">

                                        @csrf

                                        <input type="hidden" name="skill_id" value="{{ $skill['sp_id'] }}">
                                        <div class="work-hour-details mt-3">
                                            <h4 class="head font-size-16 text-start">Update your hourly rate and minimum
                                                work hours</h4>
                                            <p class="para text-start">Lorem Ipsum has been the industry's standard
                                                dummy text ever since the 1500s</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="{{ $skill['rate'] }}">
                                                </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>Choose Minimum hours</option>
                                                    @for ($i = 1; $i <= 12; $i++) <option value="{{ $i }}"
                                                        {{ $skill['min_hours'] == $i ? 'selected' : '' }}>{{ $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">{{ $skill['skill_description'] }}</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>Choose Certificates & License</option>
                                                    <option value="Certificate"
                                                        {{ $skill['document_type'] == 'Certificate' ? 'selected' : '' }}>
                                                        Certificate</option>
                                                    <option value="License"
                                                        {{ $skill['document_type'] == 'License' ? 'selected' : '' }}>
                                                        License</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"
                                                    value="{{ $skill['document_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">
                                                        @if(isset($skill['doc_Image']))
                                                        <img src="{{ $skill['doc_Image'] }}" alt="Document Image"
                                                            width="100">
                                                        @endif
                                                    </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>
                                                        @if(isset($skill['work_images']))
                                                        @foreach($skill['work_images'] as $work_image)
                                                        <img src="{{ $work_image }}" alt="Work Image" width="100">
                                                        @endforeach
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="tips-block d-flex gap-4px">
                                            <div class="tips-block-items">
                                                <span class="payment-tips align-items-start"><img
                                                        src=" {{ asset('webAssets/assets/images/123.png') }}"
                                                        alt="tips">
                                                    <p>By adding this skill, you're confirming you have the skills &
                                                        licenses as needed for this category. Service providers are
                                                        responsible for making sure they have the skills necessary to
                                                        perform.</p>
                                                </span>
                                            </div>
                                            <div class="tips-block-items">
                                                <span class="payment-tips body-bg align-items-start"><img
                                                        src=" {{ asset('webAssets/assets/images/123.png') }}"
                                                        alt="tips">
                                                    <p>By adding this skill, you're confirming you have the skills &
                                                        licenses as needed for this category. Service providers are
                                                        responsible for making sure they have the skills necessary to
                                                        perform.</p>
                                                </span>
                                            </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>

@endsection