@extends('front.procurement.layout.app')
@section('content')

<style>
    .actions ul li:nth-child(3) {
        display: none !important;
    }

    input.subBTN {

        color: #fff;
        border-color: #011452;
        background: #011452;
        padding: 1rem 1.125rem;
        font-size: 1rem;
        margin-top: 15px;
        line-height: 1.25rem;
        border-radius: 4px;
        text-align: center;
        width: 100%;
        margin-bottom: -35px;
    }

    .nk-content-body {
        margin-top: 105px;
    }

    .add_btn {
        display: inline-block;
        position: relative;
        color: #fff;
        font-weight: 500;
        transition: all .4s ease;
        border-color: #011452;
        background: #011452;
        padding: 16px;
        font-size: 13px;
        margin-top: 47px;
        line-height: 0.25rem;
        border-radius: 4px;
        text-align: center;
        width: 100%;
        cursor: pointer;
    }

    .remove_btn {
        display: inline-block;
        position: relative;
        color: #fff;
        font-weight: 500;
        transition: all .4s ease;
        border-color: #e85347;
        background: #e85347;
        padding: 16px;
        font-size: 13px;
        margin-top: 47px;
        line-height: 0.25rem;
        border-radius: 4px;
        text-align: center;
        width: 100%;
        cursor: pointer;
    }
    
    /* Custom CSS for Select2 height */
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #dbdfea !important; /* Adjust the height as needed */
        line-height: 1.25rem; /* Adjust the line-height as needed */
        color: #3c4d62;
        font-weight: 400;
        padding: 11px 1rem;
        font-size: 16px;
        
    }
    .select2-search__field{
        color: #3c4d62;
    }
</style>

<div class="nk-content">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="components-preview wide-md mx-auto">
                    <!-- .nk-block-head -->
                    <div class="nk-block nk-block-lg">

                        @if(isset($organization))
                        <div class="nk-block-head">
                            <div class="nk-block-head-content">
                                <h4 class="title nk-block-title">Edit Organization Service</h4>
                                <div class="nk-block-des">
                                    <p class="text-center">Lorem Ipsum is simply dummy text of the printing and
                                        typesetting
                                        industry. Lorem Ipsum has been the industry's
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-bordered">
                            <div class="card-inner">
                                <form id="myForm" action="{{ route('organization.update', $organization->id) }}"
                                    class="nk-wizard nk-wizard-simple is-alter" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="nk-wizard-head">
                                        <h5>Step 1</h5>
                                    </div>
                                    <div class="nk-wizard-content">
                                        <div class="row gy-3">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Service Category</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" data-msg="Required"
                                                                id="department" name="department_id" required>
                                                                <option value="" selected disabled>Select Service Category
                                                                </option>
                                                                @if(count($departments) > 0)
                                                                @foreach($departments as $depart)
                                                                <option value="{{ $depart->id }}" {{ $organization->
                                                                    department_id === $depart->id ? 'selected' : '' }}
                                                                    >{{ ucfirst($depart->department_name) }}</option>
                                                                @endforeach
                                                                @endif

                                                            </select>
                                                            <span class="text-danger" id="department-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Organization
                                                        Services</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" id="js-select2-multiple" multiple="multiple" data-msg="Required"
                                                                id="service" name="service_id[]" required>
                                                                @if(count($services) > 0)
                                                                @foreach($services as $ser)
                                                                <option value="{{ $ser->id }}" @foreach($organization->
                                                                    services as $service) {{ $service->id === $ser->id ?
                                                                    'selected' : '' }} @endforeach >{{
                                                                    ucfirst($ser->name) }}</option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                            <span class="text-danger" id="service-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Organization
                                                        Type</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" data-msg="Required"
                                                                id="organization_type" name="organization_type" required>
                                                                @if(count($organization_types) > 0)
                                                                @foreach($organization_types as $type)
                                                                <option value="{{ $type->name }}" {{ $organization->
                                                                    organization_types === $type->name ? 'selected' : '' }} >{{
                                                                    ucfirst($type->name) }}</option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                            <span class="text-danger" id="organization_types-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Level of
                                                        Experience</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" data-msg="Required"
                                                                id="experience" name="experience_id" required>
                                                                <option value="" selected disabled>Select Experience
                                                                </option>
                                                                @if(count($experiences) > 0)
                                                                @foreach($experiences as $exp)
                                                                <option value="{{ $exp->id }}" @foreach($organization->
                                                                    experiences as $experience) {{ $experience->id ===
                                                                    $exp->id ? 'selected' : '' }} @endforeach >{{
                                                                    ucfirst($exp->level) }} </option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                            <span class="text-danger" id="experience-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Years in Business</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" data-msg="Required"
                                                                id="years_business" name="years_business" required>
                                                                <option value="" selected disabled>Select Years</option>
                                                                
                                                                <option value="0-5">0-5</option>
                                                                <option value="5-10">5-10</option>
                                                                <option value="10+">over a decade (10+)</option>
                                                                
                                                            </select>
                                                            <span class="text-danger" id="experience-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="nk-wizard-head">
                                        <h5>Step 2</h5>
                                    </div>
                                    <div class="nk-wizard-content">
                                        <div class="row gy-3">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-username">Service
                                                        Title</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="service_title"
                                                            value="{{ $organization->service_title }}"
                                                            data-msg="Required" class="form-control required"
                                                            id="service_title" required>
                                                        <span class="text-danger" id="service-error"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row gy-3">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-re-password">Service
                                                        Description</label>
                                                    <div class="form-control-wrap">
                                                        <textarea data-msg="Required" class="form-control"
                                                            name="service_description" id="service_description"
                                                            cols="30" rows="5"
                                                            required>{{ $organization->service_description }}</textarea>
                                                        <span class="text-danger" id="service-error"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!--<div class="row gy-3">-->
                                        <!--    <div class="col-md-4">-->
                                        <!--        <div class="form-group">-->
                                        <!--            <label class="form-label" for="image">Service-->
                                        <!--                Image</label>-->
                                        <!--            <div class="form-control-wrap">-->
                                        <!--                <img class="card-link" width="150"-->
                                        <!--                    src="{{ asset($organization->image) }}" class="img-fluid">-->
                                        <!--            </div>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                        <!--    <div class="col-md-8">-->
                                        <!--        <div class="form-group">-->
                                        <!--            <label class="form-label" for="image">Update Service-->
                                        <!--                Image</label>-->
                                        <!--            <div class="form-control-wrap">-->
                                        <!--                <input type="file" name="service_image" class="form-control"-->
                                        <!--                    id="service_image">-->
                                        <!--                <span class="text-danger" id="service-error"></span>-->
                                        <!--            </div>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                        <!--</div>-->
                                        <div class="parent_append">

                                            <div class="appended_items">

                                                <div class="row gy-3">
                                                    <div class="col-12 col-lg-5">
                                                        <div class="form-group">
                                                            <label class="form-label" for="fw-username">Past Client
                                                                Name</label>
                                                            <div class="form-control-wrap">
                                                                <input type="text" class="form-control " id=""
                                                                    name="client_title[]">
                                                            </div>
                                                            <span class="text-danger" id="client_title-error"></span>
                                                        </div>
                                                    </div>
                                                    <!--<div class="col-12 col-lg-4">-->
                                                    <!--    <div class="form-group">-->
                                                    <!--        <label class="form-label" for="default-06">Past Client-->
                                                    <!--            Image</label>-->
                                                    <!--        <div class="form-control-wrap">-->
                                                    <!--            <div class="custom-file">-->
                                                    <!--                <input type="file" name="client_image[]" id=""-->
                                                    <!--                    class="custom-file-input">-->
                                                    <!--                <label class="custom-file-label"-->
                                                    <!--                    for="customFile">Choose file</label>-->
                                                    <!--            </div>-->
                                                    <!--            <span class="text-danger"-->
                                                    <!--                id="client_image-error"></span>-->
                                                    <!--        </div>-->
                                                    <!--    </div>-->
                                                    <!--</div>-->
                                                    <div class="col-12 col-lg-3">
                                                        <div class="add_btn">Add more clients</div>
                                                    </div>
                                                </div>
                                                <div class="row gy-3">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label class="form-label" for="fw-re-password">Past Client
                                                                Description</label>
                                                            <div class="form-control-wrap">
                                                                <textarea class="form-control"
                                                                    name="client_description[]" id="" cols="30" rows="3"
                                                                    style="width: 100%;"></textarea>
                                                            </div>
                                                            <span class="text-danger"
                                                                id="client_description-error"></span>
                                                        </div>

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

                                        </div>
                                        <input type="submit" class="subBTN" />
                                        <!-- .row -->
                                    </div>
                                </form>
                            </div>
                        </div>
                        @else
                        <div class="nk-block-head">
                            <div class="nk-block-head-content">
                                <h4 class="title nk-block-title">Add Organization Service</h4>
                                <div class="nk-block-des">
                                    <!--<p class="text-center">Lorem Ipsum is simply dummy text of the printing and-->
                                    <!--    typesetting-->
                                    <!--    industry. Lorem Ipsum has been the industry's-->
                                    <!--</p>-->
                                </div>
                            </div>
                        </div>
                        <div class="card card-bordered">
                            <div class="card-inner">
                                <form id="myForm" action="{{ route('organization.store') }}"
                                    class="nk-wizard nk-wizard-simple is-alter" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="nk-wizard-content">
                                        <div class="row gy-3">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Service Category</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" id="js-select2-multiple" multiple="multiple" data-msg="Required"
                                                                id="department" name="department_id[]" required>
                                                                @if(count($departments) > 0)
                                                                @foreach($departments as $depart)
                                                                <option value="{{ $depart->id }}">{{
                                                                    ucfirst($depart->department_name) }}</option>
                                                                @endforeach
                                                                @endif

                                                            </select>
                                                            <span class="text-danger" id="department-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--<div class="col-md-6">-->
                                            <!--    <div class="form-group">-->
                                            <!--        <label class="form-label" for="fw-nationality">Organization-->
                                            <!--            Services</label>-->
                                            <!--        <div class="form-control-wrap ">-->
                                            <!--            <div class="form-control-select">-->
                                            <!--                <select class="form-control required" id="js-select2-multiple" multiple="multiple" data-msg="Required"-->
                                            <!--                    id="service" name="service_id[]" required >-->
                                            <!--                    @if(count($services) > 0)-->
                                            <!--                    @foreach($services as $ser)-->
                                            <!--                    <option value="{{ $ser->id }}">{{ ucfirst($ser->name) }}-->
                                            <!--                    </option>-->
                                            <!--                    @endforeach-->
                                            <!--                    @endif-->
                                            <!--                </select>-->
                                            <!--                <span class="text-danger" id="service-error"></span>-->
                                            <!--            </div>-->
                                            <!--        </div>-->
                                            <!--    </div>-->
                                            <!--</div>-->
                                            
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Organization
                                                        Type</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" data-msg="Required"
                                                                id="organization_type" name="organization_type" required>
                                                                @if(count($organization_types) > 0)
                                                                @foreach($organization_types as $type)
                                                                <option value="{{ $type->name }}">{{
                                                                    ucfirst($type->name) }}</option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                            <span class="text-danger" id="organization_types-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Organization Size</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" data-msg="Required"
                                                                id="experience" name="scope" required>
                                                                <option value="" selected disabled>Organization size
                                                                </option>
                                                                @if(count($ogranization_scopes) > 0)
                                                                @foreach($ogranization_scopes as $scope)
                                                                <option value="{{ $scope->name }}">{{ ucfirst($scope->name)
                                                                    }} </option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                            <span class="text-danger" id="experience-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="fw-nationality">Years in Business</label>
                                                    <div class="form-control-wrap ">
                                                        <div class="form-control-select">
                                                            <select class="form-control required" data-msg="Required"
                                                                id="years_business" name="years_business" required>
                                                                <option value="" selected disabled>Select years</option>
                                                                <option value="0-5">0-5</option>
                                                                <option value="5-10">5-10</option>
                                                                <option value="10+">over a decade (10+)</option>
                                                            </select>
                                                            <span class="text-danger" id="experience-error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="submit" class="subBTN" />
                                    <!--<div class="nk-wizard-head">-->
                                    <!--    <h5>Step 2</h5>-->
                                    <!--</div>-->
                                    <!--<div class="nk-wizard-content">-->
                                    <!--    <div class="row gy-3">-->
                                    <!--        <div class="col-md-12">-->
                                    <!--            <div class="form-group">-->
                                    <!--                <label class="form-label" for="fw-username">Service-->
                                    <!--                    Title</label>-->
                                    <!--                <div class="form-control-wrap">-->
                                    <!--                    <input type="text" name="service_title" data-msg="Required"-->
                                    <!--                        class="form-control required" id="service_title" required>-->
                                    <!--                    <span class="text-danger" id="service-error"></span>-->
                                    <!--                </div>-->
                                    <!--            </div>-->
                                    <!--        </div>-->
                                    <!--    </div>-->

                                    <!--    <div class="row gy-3">-->
                                    <!--        <div class="col-md-12">-->
                                    <!--            <div class="form-group">-->
                                    <!--                <label class="form-label" for="fw-re-password">Service-->
                                    <!--                    Description</label>-->
                                    <!--                <div class="form-control-wrap">-->
                                    <!--                    <textarea data-msg="Required" class="form-control"-->
                                    <!--                        name="service_description" id="service_description"-->
                                    <!--                        cols="30" rows="5" required> </textarea>-->
                                    <!--                    <span class="text-danger" id="service-error"></span>-->
                                    <!--                </div>-->
                                    <!--            </div>-->
                                    <!--        </div>-->
                                    <!--    </div>-->

                                        <!--<div class="row gy-3">-->
                                        <!--    <div class="col-md-12">-->
                                        <!--        <div class="form-group">-->
                                        <!--            <label class="form-label" for="image">Service-->
                                        <!--                Image</label>-->
                                        <!--            <div class="form-control-wrap">-->
                                        <!--                <input type="file" name="service_image" data-msg="Required"-->
                                        <!--                    class="form-control required" id="service_image" required>-->
                                        <!--                <span class="text-danger" id="service-error"></span>-->
                                        <!--            </div>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                        <!--</div>-->

                                    <!--    <div class="parent_append">-->

                                    <!--        <div class="appended_items">-->
                                    <!--            <div class="row gy-3">-->
                                    <!--                <div class="col-12 col-lg-5">-->
                                    <!--                    <div class="form-group">-->
                                    <!--                        <label class="form-label" for="fw-username">Past Client-->
                                    <!--                            Name</label>-->
                                    <!--                        <div class="form-control-wrap">-->
                                    <!--                            <input type="text" class="form-control " id=""-->
                                    <!--                                name="client_title[]">-->
                                    <!--                        </div>-->
                                    <!--                        <span class="text-danger" id="client_title-error"></span>-->
                                    <!--                    </div>-->
                                    <!--                </div>-->
                                                    <!--<div class="col-12 col-lg-4">-->
                                                    <!--    <div class="form-group">-->
                                                    <!--        <label class="form-label" for="default-06">Past Client-->
                                                    <!--            Image</label>-->
                                                    <!--        <div class="form-control-wrap">-->
                                                    <!--            <div class="custom-file">-->
                                                    <!--                <input type="file" name="client_image[]" id=""-->
                                                    <!--                    class="custom-file-input">-->
                                                    <!--                <label class="custom-file-label"-->
                                                    <!--                    for="customFile">Choose file</label>-->
                                                    <!--            </div>-->
                                                    <!--            <span class="text-danger"-->
                                                    <!--                id="client_image-error"></span>-->
                                                    <!--        </div>-->
                                                    <!--    </div>-->
                                                    <!--</div>-->
                                    <!--                <div class="col-12 col-lg-3">-->
                                    <!--                    <div class="add_btn">Add more clients</div>-->
                                    <!--                </div>-->
                                    <!--            </div>-->
                                    <!--            <div class="row gy-3">-->
                                    <!--                <div class="col-md-12">-->
                                    <!--                    <div class="form-group">-->
                                    <!--                        <label class="form-label" for="fw-re-password">Past Client-->
                                    <!--                            Description</label>-->
                                    <!--                        <div class="form-control-wrap">-->
                                    <!--                            <textarea class="form-control"-->
                                    <!--                                name="client_description[]" id="" cols="30" rows="3"-->
                                    <!--                                style="width: 100%;"></textarea>-->
                                    <!--                        </div>-->
                                    <!--                        <span class="text-danger"-->
                                    <!--                            id="client_description-error"></span>-->
                                    <!--                    </div>-->

                                    <!--                </div>-->
                                    <!--            </div>-->
                                    <!--        </div>-->

                                    <!--    </div>-->

                                    <!--    <input type="submit" class="subBTN" />-->
                                        <!-- .row -->
                                    <!--</div>-->
                                </form>
                            </div>
                        </div>
                        @endif
                    </div>
                    <!-- .nk-block -->
                </div>
                <!-- .components-preview -->
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')


    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     
    <script>
        $(document).ready(function() {
            $('#js-select2-multiple').select2();
        });
    </script>
    
    <script>
        $(document).ready(function() {
            $('#js-select2-multiple').select2({
                placeholder: 'Select Service Category',
                allowClear: true // Enables the "clear" button
                // Other options...
            });
        });
    </script>


<script>
    $(document).ready(function () {
        var parentAppend = $(".parent_append");
        $('.add_btn').click(function () {

            if (parentAppend.children().length < 3) {
                $('.parent_append:last').append('<div class="appended_items"> <div class="row gy-3"> <div class="col-12 col-lg-5"> <div class="form-group"> <label class="form-label" for="fw-username">Past Client Name</label> <div class="form-control-wrap"> <input type="text" data-msg="Required" class="form-control " id="" name="client_title[]" > </div> <span class="text-danger" id="past-error"></span> </div> </div> <div class="col-12 col-lg-3"> <div class="remove_btn">Remove Client</div> </div> </div> <div class="row gy-3"> <div class="col-md-12"> <div class="form-group"> <label class="form-label" for="fw-re-password">Past Client Description</label> <div class="form-control-wrap"> <textarea data-msg="" class="form-control" name="client_description[]" id="" cols="30" rows="3"  style="width: 100%;"></textarea> </div> <span class="text-danger" id="past_client-error"></span> </div> </div> </div> </div>');
            } else {
                alert("You can only add 3 clients, cannot add more.");
            }



        });
        $('.parent_append').on('click', '.remove_btn', function () {
            $(this).parent().parent().parent().remove();
        });

    });
</script>

@endsection