@php
    $user = auth()->user();
  
    $role = $user->roles->pluck('name')[0];

@endphp
<x-admin.layout>
    <x-slot name="title">Inward</x-slot>
    <x-slot name="heading">Inward</x-slot>
    
        <div class="row" id="addContainer" >
            <div class="col-sm-12">
                <div class="card">
                    <form class="theme-form" name="addForm" id="addForm" enctype="multipart/form-data">
                        @csrf

                        <div class="card-header">
                            <h4 class="card-title">Add Inward</h4>
                        </div>

                        <div class="card-body">
                            <div class="live-preview">
                                <div class="row gy-4">
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="basiInput" class="form-label">Delivery Mode<span class="text-danger">*</span></label>
                                            <select class="form-select" id="delivery_id" name="delivery_id" aria-label="Delivery Mode">
                                                <option disabled selected>--- Select Delivery Mode ---</option>
                                                @foreach ($deliverymode_data as $deliverymode)
                                                    <option value="{{ $deliverymode->id }}">{{ $deliverymode->modename }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="invalid-feedback"></div>
                                    </div>

                                  
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="usertype" class="form-label">User Type<span class="text-danger">*</span></label>
                                            <input type="text" id="usertype" name="usertype" class="form-control" id="exampleInputpassword" value="General" readonly>
                                        </div>
                                    </div>
                                    
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="fromwhom" class="form-label">From Whom<span class="text-danger">*</span></label>
                                            <br>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" name="fromwhom" type="radio" id="inlineCheckbox1" value="General">
                                                <label class="form-check-label" for="inlineCheckbox1">General</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" name="fromwhom" type="radio" id="inlineCheckbox2" value="Department">
                                                <label class="form-check-label" for="inlineCheckbox2">Department</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" name="fromwhom" type="radio" id="inlineCheckbox3" value="Organisation">
                                                <label class="form-check-label" for="inlineCheckbox3">Organisation</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" name="fromwhom" type="radio" id="inlineCheckbox4" value="VIP">
                                                <label class="form-check-label" for="inlineCheckbox4">VIP</label>
                                            </div>
                                        </div>
                                    
                                       
                                    </div>
                                    <div class="col-xxl-3 col-md-6">
                                        <div id="departmentDropdown" class="form-group" style="display:none;">
                                            <label for="department">Select Department<span class="text-danger">*</span></label>
                                            <select id="department" name="department" class="form-select">
                                                <option disabled selected>--- Select department ---</option>
                                                @foreach ($departments as $department)
                                                    <option value="{{ $department->id }}">{{ $department->extname }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    
                                        <div id="organisationTextbox" class="form-group" style="display:none;">
                                            <label for="organisation">Enter Organisation<span class="text-danger">*</span></label>
                                            <input type="text" id="organisation" name="organisation" class="form-control">
                                        </div>
                                    
                                        <div id="vipDropdown" class="form-group" style="display:none;">
                                            <label for="vip">Select VIP<span class="text-danger">*</span></label>
                                            <select id="vip" name="vip" class="form-select">
                                                <option disabled selected>--- Select VIP ---</option>
                                                @foreach ($vips as $vip)
                                                    <option value="{{ $vip->id }}">{{ $vip->vipname }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                   
                                </div>

                            </div>

                        </div>

                        <div class="card-body">
                            <div class="live-preview">
                                <div class="row gy-4">
                                    <!--<div class="col-xxl-3 col-md-6">-->
                                    <!--    <div>-->
                                    <!--        <label for="ward_id" class="form-label">Ward</label>-->
                                    <!--        <select class="form-select" id="ward_id" name="ward_id" aria-label="ward">-->
                                    <!--            <option disabled selected>--- Select ward ---</option>-->
                                    <!--            @foreach ($wards as $ward)-->
                                    <!--                <option value="{{ $ward->id }}">{{ $ward->name }}</option>-->
                                    <!--            @endforeach-->
                                    <!--        </select>-->
                                    <!--    </div>-->
                                    <!--</div>-->

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="subject" class="form-label">Subject<span class="text-danger">*</span></label>
                                            <textarea type="text" class="form-control" id="subject" name="subject" value=""></textarea>
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="sendername_designation" class="form-label">Sender Name/Designation<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="sendername_designation" name="sendername_designation" value="">
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="letter_ref_no" class="form-label">Letter Ref. Number<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="letter_ref_no" name="letter_ref_no" value="">
                                        </div>
                                    </div>
                                     <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="recevied_data" class="form-label">Recevied Date<span class="text-danger">*</span></label>
                                            <input type="date" class="form-control" id="recevied_data" name="recevied_data">
                                        </div>
                                    </div>

                                </div>
                                <!--end row-->
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="live-preview">
                                <div class="row gy-4">
                                   


                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="letter_date" class="form-label">Letter Date<span class="text-danger">*</span></label>
                                            <input type="date" class="form-control" id="letter_date" name="letter_date">
                                        </div>
                                    </div>
                                  @php
                                        
                                        $now = now()->setTimezone('Asia/Kolkata')->format('Y-m-d\TH:i');
                                    @endphp
                                    
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="daily_date" class="form-label">Daily Date and Time<span class="text-danger">*</span></label>
                                            <input type="datetime-local" class="form-control" id="daily_date" name="daily_date" value="{{ $now }}">
                                        </div>
                                    </div>




                                   <div class="col-xxl-3 col-md-6">
                                        
                                        <div>
                                            <label for="file_upload" class="form-label">File Upload</label>
                                            <input class="form-control" type="file" id="file_upload" name="file_upload" accept="image/*,.pdf" onchange="handleFileSelect(event)">
                                             <small id="fileSizeInfo" class="form-text text-muted">Allowed file size: up to 50MB</small>
                                        </div>
                                        <div style="margin-top: 10px;">
                                          
                                             <button type="button" class="btn btn-secondary mt-2" id="showFileButton" style="display:none;">
                                                <i class="ri-eye-fill fs-16"></i> View
                                            </button>
                                        </div>
                                    </div>
                                  
                                    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <img id="modalImage" src="" alt="Preview" style="width: 100%; max-height: 80vh; object-fit: contain;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                   
                                    <div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="pdfModalLabel">PDF Preview</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <iframe id="modalPdf" src="" style="width: 100%; height: 80vh;" frameborder="0"></iframe>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="card-body">
                            <div class="live-preview">
                                <div class="row gy-4">

                                   <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="mobile" class="form-label">Mobile</label>
                                            <input type="text" class="form-control" id="mobile" name="mobile" value="" maxlength="10" oninput="validateMobile()">
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="email" class="form-label">Email</label>
                                            <input type="text" class="form-control" id="email" name="email" value="" oninput="validateEmail()">
                                            <small id="emailError" class="text-danger" style="display:none;">Please enter a valid Gmail address</small>
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="comments" class="form-label">Comments</label>
                                            <textarea type="text" class="form-control" id="comments" name="comments"  value=""></textarea>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary" id="addSubmit">Submit</button>
                            <button type="reset" class="btn btn-warning">Reset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>





</x-admin.layout>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
function validateMobile() {
    const input = document.getElementById('mobile');
    input.value = input.value.replace(/\D/g, '');
    if (input.value.length > 10) {
        input.value = input.value.slice(0, 10);
    }
}


function validateEmail() {
    const emailInput = document.getElementById('email');
    const emailError = document.getElementById('emailError');
    const emailValue = emailInput.value;
    if (!emailValue.endsWith('@gmail.com')) {
        emailError.style.display = 'block';
    } else {
        emailError.style.display = 'none';
    }
}


</script>

<script>
let fileSrc = ''; 
let fileType = '';

function handleFileSelect(event) {
    const file = event.target.files[0];
    const showFileButton = document.getElementById('showFileButton');
    const fileSizeInfo = document.getElementById('fileSizeInfo');
    
    if (file) {
        // Check file size (50MB = 50,000,000 bytes)
        if (file.size > 50000000) {
            fileSizeInfo.textContent = 'File size exceeds 50MB. Please choose a smaller file.';
            fileSizeInfo.classList.add('text-danger'); // Add red color for the message
            showFileButton.style.display = 'none';
            return;
        } else {
            fileSizeInfo.textContent = 'Allowed file size: up to 50MB';
            fileSizeInfo.classList.remove('text-danger');
        }

        fileType = file.type;
        const reader = new FileReader();
        
        reader.onload = function(e) {
            fileSrc = e.target.result;
            showFileButton.style.display = 'block';
        };
        
        if (fileType.startsWith('image/')) {
            reader.readAsDataURL(file);
        } else if (fileType === 'application/pdf') {
            reader.readAsDataURL(file);
        } else {
            showFileButton.style.display = 'none';
        }
    } else {
        fileSizeInfo.textContent = 'Allowed file size: up to 50MB';
        fileSizeInfo.classList.remove('text-danger');
        showFileButton.style.display = 'none';
    }
}

document.getElementById('showFileButton').addEventListener('click', function() {
    if (fileType.startsWith('image/')) {
        const modalImage = document.getElementById('modalImage');
        modalImage.src = fileSrc;
        const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
        imageModal.show();
    } else if (fileType === 'application/pdf') {
        const modalPdf = document.getElementById('modalPdf');
        modalPdf.src = fileSrc;
        const pdfModal = new bootstrap.Modal(document.getElementById('pdfModal'));
        pdfModal.show();
    }
});

</script>

<script>
// $("#addForm").submit(function(e) {
//     e.preventDefault();
//     $("#addSubmit").prop('disabled', true);
//     var formdata = new FormData(this);
    
//     $.ajax({
//         url: '{{ route('inwardfile.store') }}',
//         type: 'POST',
//         data: formdata,
//         contentType: false,
//         processData: false,
//         success: function(data) {
//             $("#addSubmit").prop('disabled', false);
//             if (!data.error2) {
//                 swal({
//                     title: "Successful!",
//                     text: `Inward created successfully! Formatted ID: ${data.formattedId}`,
//                     icon: "success"
//                 }).then((action) => {
//                     window.location.href = '{{ route('inwardfile.index') }}';
//                 });
//             } else {
//                 swal("Error!", data.error2, "error");
//             }
//         },
//         statusCode: {
//             422: function(responseObject) {
//                 $("#addSubmit").prop('disabled', false);
//                 resetErrors();
//                 highlightErrors(responseObject.responseJSON.errors);
//             },
//             500: function() {
//                 $("#addSubmit").prop('disabled', false);
//                 swal("Error occurred!", "Something went wrong please try again", "error");
//             }
//         }
//     });
// });
$("#addForm").submit(function(e) {
    e.preventDefault();
    $("#addSubmit").prop('disabled', true);
    var formdata = new FormData(this);
    
    $.ajax({
        url: '{{ route('inwardfile.store') }}',
        type: 'POST',
        data: formdata,
        contentType: false,
        processData: false,
        success: function(data) {
            $("#addSubmit").prop('disabled', false);
            if (!data.error2) {
                swal({
                    title: "Successful!",
                    content: {
                        element: "div",
                        attributes: {
                            innerHTML: `Inward created successfully! <br> <span style="font-weight:bold; text-align:center; display:block;">Formatted ID: ${data.formattedId}</span>`,
                        },
                    },
                    icon: "success"
                }).then((action) => {
                    window.location.href = '{{ route('inwardfile.index') }}';
                });
            } else {
                swal("Error!", data.error2, "error");
            }
        },
        statusCode: {
            422: function(responseObject) {
                $("#addSubmit").prop('disabled', false);
                resetErrors();
                highlightErrors(responseObject.responseJSON.errors);
            },
            500: function() {
                $("#addSubmit").prop('disabled', false);
                swal("Error occurred!", "Something went wrong please try again", "error");
            }
        }
    });
});


function resetErrors() {
  
    $('input.is-invalid, select.is-invalid, textarea.is-invalid').removeClass('is-invalid');
    $('.text-danger').hide();
}

function highlightErrors(errors) {
    let firstErrorField = null;

    $.each(errors, function(key, messages) {
      
        var input = $('input[name="' + key + '"], select[name="' + key + '"], textarea[name="' + key + '"]');
        var errorElement = $('#' + key + 'Error');

        if (errorElement.length) {
            errorElement.text(messages[0]).show();
        } else {
            input.after('<small id="' + key + 'Error" class="text-danger">' + messages[0] + '</small>');
        }

        input.addClass('is-invalid');

        if (!firstErrorField) {
            firstErrorField = input;
        }
    });

    if (firstErrorField) {
        firstErrorField.focus();
    }
}
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    function handleRadioChange() {
        const selectedValue = document.querySelector('input[name="fromwhom"]:checked')?.value;
        document.getElementById('departmentDropdown').style.display = 'none';
        document.getElementById('organisationTextbox').style.display = 'none';
        document.getElementById('vipDropdown').style.display = 'none';
        switch (selectedValue) {
            case 'Department':
                document.getElementById('departmentDropdown').style.display = 'block';
                break;
            case 'Organisation':
                document.getElementById('organisationTextbox').style.display = 'block';
                break;
            case 'VIP':
                document.getElementById('vipDropdown').style.display = 'block';
                break;
            case 'General':
                break;
        }
    }
    document.querySelectorAll('input[name="fromwhom"]').forEach(function(radio) {
        radio.addEventListener('change', handleRadioChange);
    });
});

</script>