@extends('admin.layout.index')
@section('title')
    {{ __('messages.fleet') }}
@endsection

@section('content')

    <div class="content-header">

    </div>
    <div class="content">
        <div class="col-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h4 class="box-title">{{ __('messages.add-photos') }}</h4>
                    <h6 class="box-subtitle"></h6>
                </div>
                <div class="box-body">
                    <div class="box">
                        <div class="box-header with-border">
                            <h4 class="box-title">{{ __('messages.photos') }}</h4>
                        </div>
                        <div class="box-body">
                            <div class="popup-gallery">
                                <div class="row">
                                    @if ($fleet->media != null)
                                        @foreach ($fleet->media as $media)
                                            @if (!empty($media->path) && file_exists(public_path() . '/upload/image/' . $media->path))
                                                <div class="col-sm-3">
                                                    <a href="{{ url('/upload/image/' . $media->path) }}" title="">
                                                        <img src="{{ url('/upload/image/' . $media->path) }}"
                                                            style="width:100%; height: 100px" alt="" />
                                                    </a>
                                                    <div class="remove-overlay" onclick="delPhotos({{ $media->id }})">
                                                        <i class="fa fa-trash"></i>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif

                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <div class="box">
                        <div class="box-header with-border">
                            <h4 class="box-title">{{ __('messages.add-photos') }}</h4>
                        </div>
                        <form method="post" action="{{ route('fleet.fleets.addPhotos', $fleet->id) }}"
                            enctype="multipart/form-data">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="box-body">
                                <div class="col-md-12">
                                    <label>{{ __('messages.add_new_photo') }}</label><br />
                                    <input id="ImageMedias" multiple="multiple" name="photo[]" type="file"
                                        accept=".jfif,.jpg,.jpeg,.png,.gif" class="form-control">
                                    @if ($errors->has('photo.*'))
                                        <span class="help-block">
                                            <strong class="text-danger">{{ $errors->first('photo.*') }}</strong>
                                        </span>
                                    @endif
                                    <hr />
                                    <div id="divImageMediaPreview"></div>

                                </div>
                            </div>

                            <div class="box-footer">
                                <button type="submit" class="btn btn-rounded btn-primary btn-outline">
                                    <i class="ti-save-alt"></i> Save
                                </button>
                            </div>
                            <!-- /.box-body -->
                        </form>
                    </div>
                </div>


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

@endsection
@section('js')
    <script>
        $("#ImageMedias").change(function() {
            if (typeof(FileReader) != "undefined") {
                var dvPreview = $("#divImageMediaPreview");
                dvPreview.html(""); // Clear the previous images
                var validFiles = []; // Array to store valid files

                var files = $(this)[0].files;
                $.each(files, function(index, file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var img = $("<img />");
                        img.attr("style", "width: 150px; height:100px; padding: 10px");
                        img.attr("src", e.target.result);
                        img.attr("id", e.target.result);
                        dvPreview.append(img);

                        // Check dimensions after the image is loaded
                        img.on('load', function() {
                            let ratio = this.width / this.height;
                            if (this.naturalHeight < 200 || this.naturalWidth < 200 || Math.abs(
                                    ratio - 3 / 2) < 0.01) {
                                // Remove image from the preview if size is less than 200px
                                $(this).remove();

                                swal.fire({
                                    title: "{{ __('The Prefered image aspect ratio should be 10 : 11') }}",
                                    text: "{{ __('or width and height is less than 200px') }}",
                                    type: "info",
                                    confirmButtonColor: "#009EDB",
                                    closeOnConfirm: false
                                })
                            } else {
                                // If valid, push the file to the validFiles array
                                validFiles.push(file);
                            }
                        });
                    };
                    reader.readAsDataURL(file);
                });

                // Update the input with valid files only
                setTimeout(function() {
                    var dataTransfer = new DataTransfer();
                    validFiles.forEach(function(file) {
                        dataTransfer.items.add(file); // Add each valid file
                    });

                    // Replace the input files with valid ones
                    $("#ImageMedias")[0].files = dataTransfer.files;
                }, 1000); // Delay to ensure all images are checked
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });


        function delPhotos(id) {
            swal.fire({
                title: `{{ __('messages.Are you sure to delete') }}`,
                text: "{{ __('messages.You will not be able to recover this!') }}",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "{{ __('messages.Yes, delete it!') }}",
                cancelButtonText: "{{ __('messages.Cancel') }}",
                closeOnConfirm: false
            }).then(function(result) {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route('fleet.fleets.del-photo', '') }}' + '/' + id,
                        method: 'get',
                        success: function(data) {
                            if (data.status == 200) {
                                Swal.fire(
                                    '{{ __('messages.success') }}',
                                    '{{ __('messages.success.updated') }}',
                                    'success'
                                );
                                location.reload();
                            } else {
                                alert('errors');
                            }

                        },
                        error: function(data) {
                            alert('برجاء المحاوله مره اخري .. ');

                        }
                    });
                }
            });

        }
    </script>
@endsection