<style>
    .img {
        height: 240px;
        width: auto;
        object-fit: contain;
        padding: 10px;
    }



    /* Position the image container (needed to position the left and right arrows) */
    .container {
        position: relative;
    }

    /* Hide the images by default */
    .mySlides1 {}

    /* Add a pointer when hovering over the thumbnail images */
    .cursor {
        cursor: pointer;
    }

    /* Next & previous buttons */
    .prev,
    .next {
        margin: 0 25px;
        cursor: pointer;
        position: absolute;
        /* top: 35%; */
        width: auto;
        padding: 6px;
        margin-top: -500px;
        color: #0000FF;
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        -webkit-user-select: none;

    }

    .prev {
        margin: -500px -12px 0;
    }

    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* Container for image text */
    .caption-container {
        text-align: center;
        background-color: #222;
        padding: 2px 16px;
        color: white;
    }

    /* .row:after {
                                                        content: "";
                                                        display: table;
                                                        clear: both;
                                                    } */

    /* Six columns side by side */
    .column {
        float: left;
        width: 16.66%;
    }

    /* Add a transparency effect for thumnbail images */
    .demo {
        opacity: 0.6;
    }

    .active,
    .demo:hover {
        opacity: 1;
    }

    .form-select {
        display: inline-block;
    }

    .d-flex {
        display: flex;
        flex-wrap: wrap;
        /* Allow the columns to wrap if the screen size is smaller */
    }

    .col-md-6 {
        flex: 0 0 50%;
        /* Set each column to take 50% of the container's width */
        max-width: 50%;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
    }
</style>
    <div class="row">
        <div class="col-md-12 d-flex">
            <div class="col-md-6 ">
                <div class="mb-1">
                    <a class="btn btn-primary" onclick="plusSlides1(-1)">❮</a>
                    <a class="btn btn-primary" onclick="plusSlides1(1)">❯</a>
                </div>

                <div id="" class="container-fluid p-0 m-0">
                    @foreach ($docdevis as $doc)
                        <div class="mySlides1 media1 {{ $doc->typedocument->type ?? null }}  m-0">
                            <img src="{{ Storage::disk('s3')->temporaryUrl($doc->path, now()->addMinutes(30)) }}"
                                style="width:100% !important;">
                        </div>
                    @endforeach
                    {{-- <a class="prev" onclick="plusSlides1(-1)">❮</a>
                    <a class="next" onclick="plusSlides1(1)">❯</a> --}}
                </div>
            </div>
            <div class="col-md-6 mt-5">
                @can('create', App\Models\Piece::class)

                <button type="button" class="btn btn-info mt-4 mb-2" data-bs-toggle="modal" data-bs-target="#create">
                    Créer Une Piece
                </button>
                @include('devis.modal')
                @endcan
                <form class="" method="POST" action="{{ route('Piece.devis') }}">
                    {{-- <div class="text-center text-dark mt-2 mb-4 fs-4"> Créer Une Piéce </div> --}}
                    @csrf
                    <input type="hidden" name="vehicule_model_id"  value="{{ $dossier->vehicule_model_id }}"
                        id="vehicule_model_id">
                    <input type="hidden" name="devis_id" value="{{ $devis->id }}" id="">
                    <div class="row">
                        <div class="form-group col-6 mb-3">
                            <label for="brand">Type Reparation *:</label>
                            <select name="type_reparation_id" id="type_reparation_id"
                                class="form-control @error('type_reparation_id') is-invalid @enderror">
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}">
                                        {{ $type->type }}</option>
                                @endforeach
                            </select>
                            @error('type_reparation_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group col-6 mb-3">
                            <label for="brand">Operation Piéce *:</label>
                            <select name="operation" id="operation"
                                class="form-control @error('operation') is-invalid @enderror">
                                @foreach ($operations as $operation)
                                    <option value="{{ $operation->id }}">
                                        {{ $operation->operation }}</option>
                                @endforeach
                            </select>
                            @error('operation')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group col-6 mb-3">
                            <label for="piece_type_id">Type Piéce *:</label>
                            <select name="piece_type_id" id="piece_type_id"
                                class="form-control @error('piece_type_id') is-invalid @enderror">
                                <option value="">Selectionner un Type</option>
                                @foreach ($piecetypes as $type)
                                    <option value="{{ $type->id }}">
                                        {{ $type->type }}</option>
                                @endforeach
                            </select>
                            @error('piece_type_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        {{-- hadi  --}}
                        <div class="form-group col-6 mb-1">
                            <label for="piece">Piéce :</label>
                            <select name=" piece" id="existingOption"
                                class="selectPiece form-control @error('piece') is-invalid @enderror">
                                <option value="">Selectionner Piece</option>
                            </select>
                            @error('piece')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group col-6 mb-1">
                            <label for="prix_unitaire">Prix Unitaire *:</label>
                            <input type="number" min="0" step="0.01" name="prix_unitaire" id="prix_unitaire" required
                                class="form-control @error('prix_unitaire') is-invalid @enderror">
                            @error('prix_unitaire')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>


                        <div class="form-group col-6 mb-3">
                            <label for="qte">Qte *:</label>
                            <input type="number" name="qte" id="qte" min="1" value="1"
                                class="form-control @error('qte') is-invalid @enderror">

                            @error('qte')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group col-6 mb-3">
                            <label for="gravite">Gravite *:</label>
                            <select name="gravite" id="gravite" class="form-control ">
                                <option value="">Sélectionner :</option>
                                <option value="Moyen">Moyen</option>
                                <option value="Faible">Faible</option>
                            </select>
                        </div>

                        <div class="form-group col-6 mb-3">
                            <label for="gravite">Etat *:</label>
                            <select name="etat" id="etat" class="form-control ">
                                <option value="">Sélectionner :</option>
                                <option value="OUI">OUI</option>
                                <option value="NON">NON</option>
                            </select>
                        </div>

                        <div class="form-group col-6 mb-3">
                            <label for="vetuste">Vétuste :</label>
                            <input type="number" name="vetuste" id="vetuste" min="0" value="0"
                                class="form-control @error('vetuste') is-invalid @enderror">

                            @error('vetuste')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group col-6 mb-3">
                            <label for="remise">Remise :</label>
                            <input type="number" name="remise" id="remise" min="0" value="0"
                                class="form-control @error('remise') is-invalid @enderror">

                            @error('remise')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    {{-- <button id="suggestion" style="float: left" class="btn btn-success mt-2 mb-2"
                        type="button">Suggestioner</button> --}}
                    <button style="float: right" class="btn btn-primary mt-2 mb-2" type="submit">Créer</button>

                </form>
            </div>
        </div>
    </div>
<script src="{{ asset('js/vendor.js') }}"></script>
<script
    src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"
    defer></script>
<script>
    
    $('.selectPiece').select2();

    $('#piece_type_id').on('change', function() {
        // console.log(this);
        var type_id = this.value;
        $.ajax({
            url: '/TypePiece/' + type_id,
            type: 'get',
            success: function(result) {
                console.log(result);

                var selectElement = $("#existingOption"); // Corrected line

                selectElement.empty(); // Clear previous options

                $.each(result, function(key, value) {
                    selectElement.append('<option value="' + value.id + '">' + value.piece +
                        '</option>');
                });

            }
        });
    });
    $('#existingOption').on('change', function() {
        // console.log(this);
        var vehicule_id = $('#vehicule_model_id').val();
        var piece_id = this.value;
        var piecetype = $('#piece_type_id').val();
        var operation_id = $('#operation').val();
        var type = $('#type_reparation_id').val();


        $.ajax({
            url: '/Devis/Piece/Prix',
            type: 'get',
            data: {
                vehicule_id,
                piece_id,
                operation_id,
                type
            },
            success: function(result) {
                // console.log(result);
                var selectElement = $("#prix_unitaire"); // Corrected line
                selectElement.empty();
                document.getElementById('prix_unitaire').value = result;
            }
        });
    });

    function list(some, type) {
        console.log(some, type);

        var type_id = type;
        $.ajax({
            url: '/TypePiece/' + type_id,
            type: 'get',
            success: function(result) {
                var selectElement = $("#pc" + some); // Corrected line
                console.log(result);
                console.log(selectElement);
                selectElement.empty(); // Clear previous options

                $.each(result, function(key, value) {
                    selectElement.append('<option value="' + value.id + '">' + value.piece +
                        '</option>');
                });
            }
        });
    }



    let slideIndex1 = 1;
    showSlides1(slideIndex1);

    function plusSlides1(n) {
        showSlides1(slideIndex1 += n);
    }

    function currentSlide1(n) {
        showSlides1(slideIndex1 = n);
    }

    function showSlides1(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides1");
        // let dots = document.getElementsByClassName("demo1");
        if (n > slides.length) {
            slideIndex1 = 1
        }
        if (n < 1) {
            slideIndex1 = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        // for (i = 0; i < dots.length; i++) {
        //     dots[i].className = dots[i].className.replace(" active", "");
        // }
        slides[slideIndex1 - 1].style.display = "block";
        // dots[slideIndex1 - 1].className += " active";
    }
</script>
