@extends("components.layout.master")
@section('title','Modules')
@section('module-icon','far fa-building')
@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Modules</a></li>
        <li class="breadcrumb-item active">@yield('title')</li>
    </ol>
@endsection
@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="page-content">
    <div class="container-fluid"> 
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <button type="button" title="" id="addModuleBtn"
                                class="btn btn-success waves-effect waves-light float-right">
                                <i class="fa fa-plus" aria-hidden="true"></i> Add New
                                </button>
                            </div>
                        </div>
                        <br>
                        <table id="ModuleTable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Module Name</th>
                                    <th>Module Image</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($moduleList->isEmpty())
                                    <tr>
                                        <td colspan="5">No records found.</td>
                                    </tr>
                                @else
                                    @foreach ($moduleList as $module)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $module->name }}</td>
                                            <td>
                                                @if (!empty($module->imageName))
                                                    <img src="{{ asset('images/module_image/'   . $module->imageName) }}"
                                                        alt="{{ $module->name }}" width="100" height="100">
                                                @else
                                                @endif
                                            </td>
                                            <td>
                                                @if ($module->status == 1)
                                                    <span class="badge bg-success">Active</span>
                                                @elseif ($module->status == 2)
                                                    <span class="badge bg-danger">Inactive</span>
                                                @endif
                                            </td>
                                            <td>
                                                <button class="btn btn-purple btn-xs  editModule " data-id="{{ $module->id }}"><i class="fa fa-edit" aria-hidden="true"></i> Edit</button>
                                               
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> 
        </div> 
        
        <!-- Start Add Module Modal -->
        <div class="modal fade admin-query" id="addModuleModal">
            <div class="modal-dialog modal-dialog-centered small-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Add Module
                        </h4>
                        <button type="button" class="close dismissBtn" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="addModuleForm" enctype="multipart/form-data">
                            <div class="row mb-3">
                                <div class="col-lg-12">
                                    <div class="primary_input" id="">
                                        <label class="primary_input_label" for="">Module Name<span class="text-danger"> *</span></label>
                                        <input class="form-control" type="text" onkeypress="onlyAlphabets(event)" name="module_name" id="module_name" placeholder="Enter Module Name" autocomplete="off">
                                        <span class="text-danger" id="module_name_error"></span>
                                    </div><br>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="primary_input mt-3" id="">
                                    <label class="primary_input_label" for="">Product Category Image<span
                                            class="text-danger"> *</span></label>
                                    <input class="form-control" type="file" name="module_image"
                                        id="inputImage1" autocomplete="off">
                                    <span class="text-danger error-message" id="module_image_error"></span>
                                </div>
                                <div class="docs-preview clearfix mt-3" style="display: none;">
                                    <div class="img-preview preview-lg"></div>
                                </div>
                            </div><br>
                            <div class="row mt-40">
                                <div class="col-lg-12 text-center">
                                    <button class="btn btn-success waves-effect waves-light" type="submit" id="">
                                        {!! BTN_SAVE !!}
                                    </button>
                                    <button class="btn btn-secondary btn-sm ml-2" type="reset" id="">
                                        <span class="ti-reload"></span> Reset
                                    </button>    
                                </div>
                            </div>
                         </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Add Module Modal -->

        <!-- Start Edit Module Modal -->
        <div class="modal fade admin-query" id="editModuleModal">
            <div class="modal-dialog modal-dialog-centered small-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modify Module 
                        </h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="editModuleForm" enctype="multipart/form-data">
                            <input type="hidden" id="id" name="id">
                            <div class="col-lg-12">
                                <div class="add-visitor">
                                    <div class="row mb-3">
                                        <div class="col-lg-12">
                                            <div class="primary_input" id="">
                                                <label class="primary_input_label" for="">Module Name<span class="text-danger"> *</span></label>
                                                <input type="text" class="form-control" onkeypress="onlyAlphabets(event)" id="edit_module_name" name="module_name"
                                                placeholder="Enter Module Name">
                                            <span class="text-danger" id="edit_module_name_error"></span>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="primary_input mt-3" id="stateDiv">
                                                <label class="primary_input_label" for="">Module
                                                    Image<span class="text-danger"> *</span></label>
                                                <input class="form-control" type="file" name="module_image"
                                                    id="inputImage2" autocomplete="off">
                                                <span class="text-danger error-message" id="module_image1_error"></span>
                                            </div>
                                            <div class="form-group mt-3">
                                                <img id="existing_module_image" src=""
                                                    alt="Module Image" style="max-width: 100px;">
                                            </div>
                                            <div class="docs-preview1 clearfix" style="display: none;">
                                                <div class="img-preview1 preview-lg"></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group" id="statusdropdown">
                                                <label class="primary_input_label" for="">Status</label>
                                                <select class="form-control" id="edit_active_status" name="status">
                                                    <option value="1">Active</option>
                                                    <option value="2">Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-40">
                                        <div class="col-lg-12 text-center">
                                            <button class="btn btn-success btn-sm" type="submit" id="">
                                                <i class="fa fa-plus" aria-hidden="true"></i> Update
                                            </button>
                                            <button class="btn btn-secondary btn-sm ml-2" type="reset" id="">
                                                <span class="ti-reload"></span> Reset
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Start Edit Module Modal -->

        <div class="modal fade bs-example-modal-lg" id="imageModal1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Crop Image
                        </h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="productImageForm" enctype="multipart/form-data">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="img-container mb-0">
                                                <img id="image1" src="" style="width:100%;"
                                                    alt="Picture">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <h3>Preview:</h3>
                                            <div class="docs-preview clearfix">
                                                <div class="img-preview preview-lg"></div>
                                                <div class="img-preview preview-md"></div>
                                                <div class="img-preview preview-sm"></div>
                                                <div class="img-preview preview-xs"></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 text-center">
                                            <button type="button" class="btn btn-primary"
                                                id="cropImage1">Crop</button>
                                        </div>
                                    </div>
                                </div><!--end card-->
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal fade bs-example-modal-lg" id="imageModal2">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Crop Image
                        </h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="productImageForm" enctype="multipart/form-data">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="img-container mb-0">
                                                <img id="image2" src="" style="width:100%;"
                                                    alt="Picture">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <h3>Preview:</h3>
                                            <div class="docs-preview1 clearfix">
                                                <div class="img-preview preview-lg"></div>
                                                <div class="img-preview preview-md"></div>
                                                <div class="img-preview preview-sm"></div>
                                                <div class="img-preview preview-xs"></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 text-center">
                                            <button type="button" class="btn btn-primary"
                                                id="cropImage2">Crop</button>
                                        </div>
                                    </div>
                                </div><!--end card-->
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
    @include('components.footertext')
</div>
<!-- Content Wrapper. Contains page content End -->
@endsection
@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    $(document).ready(function() {
        $('#datatable').DataTable();
        $('#addModuleBtn').on('click', function() {
            
            $('#addModuleModal').modal('show');
        });

        var reset = true;
        $('#cropImage1').on('click', function() {

            $('#image1').cropper('getCroppedCanvas').toBlob(function(blob) {
                const file = new File([blob], 'cropped_image.png', {
                    type: 'image/png'
                });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                const inputImage1 = document.getElementById('inputImage1');
                inputImage1.files = dataTransfer.files;

                // Optional: Display the cropped image
                $('#inputImage1').attr('src', URL.createObjectURL(file));
                // $('.docs-preview').css('display', 'block');
            }, 'image/png');

            reset = false;
            $('#imageModal1').modal('hide');
        });
        $('#imageModal1').on('hidden.bs.modal', function() {

            if (reset) {
                $('#inputImage1').files = null;
                $('#inputImage1').val('');
                
            }
        });
        $('#imageModal2').on('hidden.bs.modal', function() {
            if (reset) {
                $('#inputImage2').files = null;
                $('#inputImage2').val('');
            }
        });
        $('#inputImage1').on('change', function() {
            if (!imageError1) {
                $('#imageModal1').modal('show');
            } else {
                toastr.error('Please choose an image file.');
            }
        });

        $('#cropImage2').on('click', function() {
            $('#image2').cropper('getCroppedCanvas').toBlob(function(blob) {
                const file = new File([blob], 'cropped_image.png', {
                    type: 'image/png'
                });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                const inputImage2 = document.getElementById('inputImage2');
                inputImage2.files = dataTransfer.files;

                // Optional: Display the cropped image
                $('#inputImage2').attr('src', URL.createObjectURL(file));
                // $('.docs-preview1').css('display', 'block');
                // $('#existing_productCategory_image').css('display', 'none');
            }, 'image/png');
            reset = false;
            $('#imageModal2').modal('hide');
        });
        $('#inputImage2').on('change', function() {
            if (!imageError2) {
                $('#imageModal2').modal('show');
            } else {
                toastr.error('Please choose an image file.');
            }
        });

        $('#addModuleForm').on('submit', function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            showLoader();
            $.ajax({
                url: '{{ route('modulestore') }}',
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                },
                contentType: false,
                processData : false,
                dataType: 'json',
                success: function(response) {
                
                    if (response.success) {
                    $('#addModuleModal').modal('hide');
                    toastr.success(response.message);  // Toastr success notification
                    setTimeout(function() {
                        hideLoader();
                        location.reload(); // Delay to allow Toastr message to display
                    }, 1000);
                } else {
                    hideLoader();
                        $.each(response.errors, function(key, value) {
                            $('#' + key + '_error').text(value);
                        });
                    }
                },
                error: function(xhr) {
                    hideLoader();
                    let response = xhr.responseJSON;
                    let errorMessage = response.message || 'Something went wrong.';
                    Swal.fire('Error', errorMessage, 'error');
                }
            });
        });
     
        $('#ModuleTable').DataTable({
            "language": {
                "paginate": {
                    "previous": "<",
                    "next": ">"
                }
            }
        });

        $(document).on('click', '.editModule', function() {
            var id = $(this).data('id');
            $('#editModuleModal').modal('show');

            $.ajax({
                url: '{{ route('modulestoreEdit') }}', // Define your edit route in the backend
                type: 'GET',
                data: {
                    id: id
                },
                dataType: 'json',
                success: function(data) {
                    $('#id').val(data.id);
                    $('#edit_module_name').val(data.name);
                    $('#existing_module_image').attr('src', '{{ asset('images/module_image') }}/' + data.imageName);
                    $('#edit_active_status').val(data.status);
                }
            });
        });

        $('#editModuleForm').on('submit', function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            showLoader();
            $.ajax({
                url: '{{ route('modulestoreUpdate') }}',
                method: 'POST',
                data: formData,
                
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                },
                contentType: false,
                processData : false,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        $('#editModuleModal').modal('hide');
                        toastr.success(response.message);  // Toastr success notification
                        setTimeout(function() {
                            hideLoader();
                            location.reload(); // Delay to allow Toastr message to display
                        }, 1000);
                    } else {
                        hideLoader();
                        $.each(response.errors, function(key, value) {
                            $('#edit_' + key + '_error').text(value);
                        });
                    }
                },
                error: function(xhr) {
                    hideLoader();
                    let response = xhr.responseJSON;
                    let errorMessage = response.message || 'Something went wrong.';
                    Swal.fire('Error', errorMessage, 'error');
                }
            });
        });

        $('#addModuleModal').on('click', function() {
            $('#module_name_error').text('');
            $('#module_image_error').text('');
           
        });

        $('#editModuleModal').on('click', function() {
            $('#edit_module_name_error').text('');
            $('#module_image1_error').text('');
            
        });

        $('#addModuleModal').on('hidden.bs.modal', function() {
            tags = [];
            $('#module_name').val('');
            $('#module_name_error').text('');
            $('#module_image_error').text('');
            $('#module_image1_error').text('');
        });
    });
</script>
@endpush