@extends('layouts.user.main')

@section('content')

<script src="{{asset('assets/js/validation/cuttingDestinationId.js')}}"></script>
@if ($errors->any())
    <div class="container-xxl alert-custom-class">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
@endif

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Loader-->
            <div id="loader">
                <div class="page-loader flex-column d-flex justify-content-center align-items-center bg-dark bg-opacity-25">
                    <span class="spinner-border text-primary" role="status"></span>
                    <span class="text-gray-800 fs-6 fw-semibold mt-5">Loading...</span>
                </div>
            </div>
            <!--end::Loader-->  
            <div class="card mb-5 mb-xl-8">
                <div class="d-flex flex-column gap-7 gap-lg-10">
                    <form class="form" method="POST" action="{{route('storeSource', $cuttingDestinationId->id)}}"  id="manageCuttingDestinationIdForm">
                        @csrf
                        <div class="card card-flush py-4">
                            <div class="card-header">
                                <div class="card-title">
                                    <div class="d-flex flex-column">
                                        <div class="d-flex align-items-center mb-1">
                                            <h2>Destination Id ({{$cuttingDestinationId->destinationId}})</h2>
                                        </div>
                                        <div class="d-flex flex-wrap fw-bold mb-4 fs-5 text-gray-400">{{$cuttingDestinationId->name}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body pt-0">
                                <div id="add_cutting_rules">
                                    <div data-repeater-list="add_cutting_rules" class="">
                                        @if (count($cuttingDataRules) < 1)
                                            <div data-repeater-item="" class="data-repeater-item-class">
                                                <div class="d-flex flex-wrap gap-5 mb-10 form-group row mb-10">
                                                    <div class="fv-row w-100 flex-md-root">
                                                        <label class="required form-label">Source</label>
                                                        <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" data-placeholder="Select Source" name="sources" id="sources" data-allow-clear="true">
                                                            @foreach ($users as $user)
                                                                <option  value="{{ $user->id }}">{{ $user->loginId }} ({{ $user->name }})</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="fv-row w-100 flex-md-root">
                                                        <label class="required form-label">Percentage</label>
                                                        <input type="number" class="form-control form-control-solid mb-2" name="percentage" placeholder="Enter Percentage" value="{{ old('percentage') }}"/>
                                                    </div>
                                                    <div class="fv-row w-100 flex-md-root">
                                                        <a href="javascript:;" data-repeater-delete="" class="btn btn-sm btn-light-danger mt-3 mt-md-9" title="Delete">
                                                            <i class="la la-trash-o fs-3"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            @foreach ($cuttingDataRules as $cuttingDataRule)
                                                <div data-repeater-item="" class="data-repeater-item-class">
                                                    <div class="d-flex flex-wrap gap-5 mb-10 form-group row mb-10">
                                                        <div class="fv-row w-100 flex-md-root">
                                                            <label class="required form-label">Source</label>
                                                            <select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" data-placeholder="Select Source" name="sources" id="sources" data-allow-clear="true">
                                                                @foreach ($users as $user)
                                                                    @if(isset($cuttingDataRule->accountId) && ($cuttingDataRule->accountId == $user->id))
                                                                    <option  value="{{ $user->id }}">{{ $user->loginId }} ({{ $user->name }})</option>
                                                                    @endif
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="fv-row w-100 flex-md-root">
                                                            <label class="required form-label">Percentage</label>
                                                            <input type="number" class="form-control form-control-solid mb-2" name="percentage" placeholder="Enter Percentage" value="{{$cuttingDataRule->percentage}}"/>
                                                            <input type="hidden" class="form-control form-control-solid mb-2" name="cuttingDataRuleId" value="{{$cuttingDataRule->id}}"/>
                                                        </div>
                                                        <div class="fv-row w-100 flex-md-root">
                                                            <a href="javascript:;" data-repeater-delete="" class="btn btn-sm btn-light-danger mt-3 mt-md-9" title="Delete">
                                                                <i class="la la-trash-o fs-3"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <div class="form-group mt-5">
                                        <button type="button" data-repeater-create="" class="btn btn-sm btn-light-primary">
                                        <span class="fa fa-plus me-2">
                                        </span>Add Source</button>
                                    </div>
                                </div>
                                <input type="hidden" id="cutting-rules-exist" value="{{ count($cuttingDataRules) != 0 ? '1' : '0' }}">
                                
                                <div id="allOptions" style="display: none;">
                                    @foreach ($users as $user)
                                        <option  value="{{ $user->id }}" >{{ $user->loginId }} ({{ $user->name }})</option>
                                    @endforeach
                                </div>


                                <div class="fv-row w-100 flex-md-root">
                                    <label class="form-label"></label>
                                    <button type="submit" class="mt-7 btn btn-lg btn-primary">Update</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
		</div>
	</div>
</div>

<script>
    $(window).on("load", function () {
        $("#loader").fadeOut("slow");
    });

    $(document).ready(function() {

        function appendOptions(dropdown) {
        let $dropdown = $(dropdown);

        console.log("Dropdown opened!", $dropdown);

        let optionCount = $dropdown.children('option').length;
        console.log("Option count before appending:", optionCount);

        if (optionCount === 1) { 
            console.log("Appending new options...");
            let options = $("#allOptions").html();
            $dropdown.append(options);

            console.log("Options appended! New count:", $dropdown.children('option').length);

            $dropdown.trigger('change.select2'); // Tells Select2 to refresh
            console.log("Select2 Updated!");
        }
    }

    $(document).on('select2:open', function(e) {
        console.log("Select2 dropdown opened!", e.target);
        appendOptions(e.target);
    });
});
</script>
@endsection