@extends('layouts.app') @push('css')
    @endpush @section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <h3>
                                        @isset($repository_file)
                                            Repository File Update
                                        @else
                                            Repository File Add
                                        @endisset
                                    </h3>
                                </div>
                                <div class="col-sm-12 col-md-6">
                                    <ol class="breadcrumb float-sm-right">
                                        <div class="d-inline p-2 text-white text-right">
                                            <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i
                                                    class="fas fa-home"></i>
                                                Home
                                            </a>
                                        </div>
                                        <div class="d-inline p-2 text-white text-right">
                                            <a href="{{ route('repositoryfile.index', $id) }}"
                                                class="btn btn-sm btn-primary text-right"><i
                                                    class="fas fa-arrow-circle-left"></i> Back</a>
                                        </div>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Main row -->
            <div class="row">
                <div class="col-md-12 col-x-12 col-sm-12">
                    <form
                        action="{{ isset($repository_file) ? route('repositoryfile.update', $repository_file->id) : route('repositoryfile.store', $id) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @isset($repository_file)
                            @method('PUT')
                        @endisset
                        <input name="id" id="id" type="hidden"
                            value="{{ isset($repository_file) ? $repository_file->id : $id }}" />
                        <div id="main-container">
                            <div class="container-item">
                                <div class="card">
                                    <div class="card-header">
                                        {{-- <h3 class="card-title">File</h3> --}}
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6">
                                                <h5>
                                                    File
                                                </h5>
                                            </div>
                                            <div class="col-sm-12 col-md-6">
                                                <div class="float-sm-right">
                                                    @isset($repository_file)
                                                    @else
                                                        <a href="javascript:void(0)"
                                                            class="remove-item btn btn-sm btn-danger remove-social-media"><i
                                                                class="fa fa-solid fa-trash"></i></i> Remove This Row</a>
                                                    @endisset
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <!-- Form -->
                                        <div class="row">
                                            <div class="col-md-6 col-xl-6 col-sm-12">
                                                <div class="form-group">
                                                    <label for="name">File Name <span
                                                            style="color: red;">*</span></label>
                                                    <input name="name[]" id="name" type="text"
                                                        placeholder="Your File Name (Ex. User Manual, Presentation etc.)"
                                                        class="form-control @error('name') is-invalid @enderror"
                                                        value="{{ $repository_file->file_name ?? old('name') }}" required />
                                                    @error('name')
                                                        <span class="invalid-repository" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-xl-6 col-sm-12">
                                                <div class="form-group">
                                                    <label for="tag">Enter Tags with comma (,)</label>
                                                    <input name="tag[]" id="tag" type="text"
                                                        placeholder="File Tags (Ex. Manual, File, Training etc.)"
                                                        class="form-control @error('tag') is-invalid @enderror"
                                                        value="{{ $repository_file->tags ?? old('tags') }}" required />
                                                    @error('tag')
                                                        <span class="invalid-repository" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        @if (!isset($repository_file))
                                            <div class="row">
                                                <div class="col-md-6 col-xl-6 col-sm-6">
                                                    <div class="form-group">
                                                        <label for="file">File <span
                                                                style="color: red;">*</span></label>
                                                        <input type='file' name='file[]' id='file'
                                                            class="form-control @error('file') is-invalid @enderror"
                                                            required
                                                            value="{{ $repository_file->file_name ?? old('file_name') }}"
                                                            placeholder="Your File"><br>
                                                        @error('file')
                                                            <span class="invalid-repository" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="row">
                                                <div class="col-md-6 col-xl-6 col-sm-6">
                                                    <div class="form-group">
                                                        <label for="file">Uploaded File <span
                                                                style="color: red;">*</span></label>
                                                        <br>
                                                        <a href="{{ route('repositoryfile.path', $repository_file->id) }}"
                                                            target="_blank">{{ $repository_file->file_name }}</a>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 col-xl-4 col-sm-12 form-group">
                                                    <br>
                                                    <div>
                                                        <button type="button" name="change-file"
                                                            class="btn btn-sm btn-warning">Change File</button>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-cl-6 col-sm-12" id="input-file">

                                                    @error('file')
                                                        <span class="invalid-repository" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div class="form-group">
                                    @isset($repository_file)
                                        <input type="submit" class="btn btn-primary" value="Update" />
                                    @else
                                        <a class="btn btn-success btn-sm" id="add-more" href="javascript:;"
                                            role="button"><i class="fa fa-plus"></i> Add More Row</a>
                                        <input type="submit" class="btn btn-primary btn-sm" id="saveButton"
                                            value="Save" />
                                    @endisset
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.row (main row) -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
    @endsection @push('js')
    <script>
        $(".delete_file").on('click', function() {
            var id = $(this).data("id");
            var token = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                url: "/filedelete/" + id,
                type: 'DELETE',
                data: {
                    "id": id,
                    "_token": token,
                },
                success: function() {
                    var classname = "div_" + id;
                    $('.' + classname).hide();
                }
            });

        });
    </script>

    <script type="text/javascript">
        function delete_file(id) {
            $.ajax({
                type: 'post',
                url: "/filedelete/" + id,
                success: console.log('yes')
            });
        };
    </script>

    <script src="{{ asset('js/cloneData.js') }}" type="text/javascript"></script>
    <script>
        $("a#add-more").cloneData({
            mainContainerId: "main-container", // Main container Should be ID
            cloneContainer: "container-item", // Which you want to clone
            removeButtonClass: "remove-item", // Remove button for remove cloned HTML
            removeConfirm: true, // default true confirm before delete clone item
            removeConfirmMessage: "Are you sure want to delete?", // confirm delete message
            //append: '<a href="javascript:void(0)" class="remove-item btn btn-sm btn-danger remove-social-media">Remove</a>', // Set extra HTML append to clone HTML
            minLimit: 1, // Default 1 set minimum clone HTML required
            maxLimit: 50, // Default unlimited or set maximum limit of clone HTML
            defaultRender: 1,
            init: function() {
                // console.info(":: Initialize Plugin ::");
            },
            beforeRender: function() {
                // console.info(":: Before rendered callback called");
            },
            afterRender: function() {
                // console.info(":: After rendered callback called");
                //$(".selectpicker").selectpicker('refresh');
            },
            afterRemove: function() {
                // console.warn(":: After remove callback called");
            },
            beforeRemove: function() {
                // console.warn(":: Before remove callback called");
            },
        });
    </script>

    <script>
        $('button[name="change-file"]').on('click', function() {
            let res = "<input type='file' name='file[]' id='file'>";
            $('div[id="input-file"]').html(res);
        });
    </script>
    <script>
        // var $this = this;
        $(document).ready(function() {
            $('#saveButton').on('click', function(e) {
                e.preventDefault(); // Prevent the default form submission
                // Serialize the form data
                // Get all file input elements
                var fileInputs = $('input[type="file"]');

                // Flag to track if all files are valid
                var allFilesValid = true;

                // Allowed file extensions
                var allowedExtensions = ['jpg', 'jpeg', 'png', 'csv', 'txt', 'xls', 'xlsx', 'pdf', 'doc',
                    'docx'
                ];

                // Max file size in bytes (5 MB)
                var maxFileSize = 5 * 1024 * 1024;
                // Loop through all file inputs
                fileInputs.each(function(index, fileInput) {
                    // Check if a file is selected
                    if (fileInput.files.length === 0) {
                        Swal.fire(
                            'Cancelled',
                            'Please upload a file for row ' + (index + 1) + '.',
                            'error'
                        );
                        allFilesValid = false;
                        return false; // Exit the loop
                    }
                    // Check file extension
                    var fileName = fileInput.files[0].name;
                    var fileExtension = fileName.split('.').pop().toLowerCase();
                    if (allowedExtensions.indexOf(fileExtension) === -1) {
                        Swal.fire(
                            'Cancelled',
                            'Invalid file type for row ' + (index + 1) +
                            '. Allowed file types: jpg, jpeg, png, csv, txt, xls, xlsx, pdf, doc, docx.',
                            'error'
                        );
                        allFilesValid = false;
                        return false; // Exit the loop
                    }
                    // Check file size
                    if (fileInput.files[0].size > maxFileSize) {
                        Swal.fire(
                            'Cancelled',
                            'File size exceeds the 5 MB limit for row ' + (index + 1) + '.',
                            'error'
                        );
                        allFilesValid = false;
                        return false; // Exit the loop
                    }
                    // Check if a name is given for the corresponding row
                    var nameInput = $(fileInput).closest('.container-item').find(
                        'input[name="name[]"]');
                    if (nameInput.val().trim() === '') {
                        Swal.fire(
                            'Cancelled',
                            'Please provide a file name for row ' + (index + 1) + '.',
                            'error'
                        );
                        allFilesValid = false;
                        return false; // Exit the loop
                    }
                });
                if (allFilesValid) {
                    var formData = new FormData($('form')[1]);
                    // Send an AJAX POST request
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('repositoryfile.save') }}',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            // Handle the response, e.g., show a success message or redirect
                            Swal.fire({
                                'Success',
                                'File(s) uploaded successfully!',
                                'success'
                            }).then((result) => {
                                // Redirect to another route after the user clicks "OK"
                                window.location.href =
                                    '{{ route('repositoryfile.index', $id) }}';

                            });
                        },
                        error: function(error) {
                            // Handle errors, e.g., show error messages
                            Swal.fire(
                                'Cancelled',
                                error.responseJSON.message,
                                'error'
                            );
                        }
                    });
                }
            });
        });
    </script>
@endpush