@extends('Admin.layout')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Yeseva+One&display=swap');

    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #0A1F44;
        --free: #ffc107;
        --captured: #2b2120;

        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;

        box-sizing: border-box;
    }


    .container {
        width: 400px;
        border-radius: 0.6em;
        padding: 20px;
        background-color: var(--form-bg) !important;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

    .form h2 {
        text-align: center;
        margin: 0 0 20px;
    }

    .form-control {
        margin-bottom: 10px;
        padding-bottom: 20px;
        position: relative;
        color: var(--text-color) !important;

    }

    .form-label {
        color: White !important;
        display: block;
        margin-bottom: 5px;
    }

    .form-control {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

    .form-select {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        color: var(--text-color) !important;


    }

    .form-control input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

    .form-control.success input {
        border-color: var(--success-color);
    }

    .form-control.error input {
        border-color: var(--error-color);
    }

    .form-control small {
        color: var(--error-color);
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.error small {
        visibility: visible;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ffc107 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .btn-submit {
        background-color: #ffc107 !important;
        color: black !important;
    }

    .upload-box {
        position: relative;
        width: 100%;
        min-height: 170px;
        border: 2px dashed #ffc107;
        border-radius: 16px;
        background: rgba(255, 255, 255, .04);
        cursor: pointer;
        overflow: hidden;
        transition: .3s;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .upload-box:hover {
        border-color: #fff;
        background: rgba(255, 255, 255, .08);
    }

    .upload-content {
        text-align: center;
        color: #ffc107;
        padding: 20px;
    }

    .upload-icon {
        font-size: 50px;
        margin-bottom: 10px;
        display: block;
    }

    .preview-image {
        width: 100%;
        height: 230px;
        object-fit: cover;
    }

    .remove-image {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 50%;
        background: rgba(220, 53, 69, .95);
        color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        z-index: 10;
    }

    .remove-image:hover {
        transform: scale(1.1);
    }

    .dragover {
        border-color: #28a745;
        background: rgba(40, 167, 69, .1);
    }
</style>



@section('content')
<h5>
    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <a href="{{ route('load_report') }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </a>
    </button> Load 5 Star
</h5>

<div class="container p-4 shadow-sm border-0">
    <div class="card-body p-4">

        <form action="{{route('submit_5star')}}" method="post" id="investForm" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-lg-4 mb-3">
                    <label class="form-label">
                        User ID
                    </label>

                    <input type="text" id="user_id" name="user_id"
                        value="{{ old('user_id') }}"
                        class="form-control" placeholder="Enter User id">
                    @error('user_id')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">
                        User Name
                    </label>

                    <input type="text" id="user_name" value="{{ old('user_name') }}" class="form-control" readonly>
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">
                        Give Spot
                    </label>

                    <select name="give_spot" class="form-control">
                        <option value="yes" {{ old('give_spot', 'yes') == 'yes' ? 'selected' : '' }}>Yes</option>
                        <option value="no" {{ old('give_spot') == 'no' ? 'selected' : '' }}>No</option>
                    </select>

                    @error('give_spot')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                
                <div class="col-lg-3 mb-3">
                    <label class="form-label">
                        Amount
                    </label>

                    <input type="text" name="amount" value="{{ old('amount') }}" class="form-control" placeholder="Enter amount">
                    @error('amount')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-3 mb-3">
                    <label class="form-label">
                        Days
                    </label>

                    <input type="text" name="roi_days" class="form-control" value="{{ old('roi_days',425) }}">
                    @error('roi_days')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-3 mb-3">
                    <label class="form-label">
                        Percentage
                    </label>

                    <input type="text" name="roi_percentage" class="form-control" value="{{ old('roi_percentage',0.5) }}">
                    @error('roi_percentage')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-3 mb-3">
                    <label class="form-label">
                        Loaded By
                    </label>
                    <select class="form-select" name="loaded_by">
                        <option value="">Select</option>
                        <option value="staff" {{ old('loaded_by')=='staff' ? 'selected':'' }}>Staff</option>
                        <option value="MD" {{ old('loaded_by')=='MD' ? 'selected':'' }}>MD</option>
                    </select>
                    </select>
                    @error('loaded_by')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror

                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label">
                        Remark (Optional)
                    </label>

                    <textarea type="text" name="remark" class="form-control" placeholder="Enter Remark" rows="3">{{ old('remark') }}</textarea>
                    @error('remark')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Receipt (Optional)</label>

                    <div class="upload-box" id="uploadBox">
                        <input type="file"
                            id="receiptInput"
                            name="receipt"
                            accept="image/*"
                            hidden>

                        <div class="upload-content" id="uploadContent">
                            <i class="ti tabler-cloud-upload upload-icon"></i>
                            <h6 class="mb-1">Upload Receipt</h6>
                            <small>Click or Drag & Drop Image</small>
                        </div>

                        <img id="previewImage" class="preview-image d-none">

                        <button type="button" class="remove-image d-none" id="removeImage">
                            <i class="ti tabler-x"></i>
                        </button>
                        @error('receipt')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-center gap-3 mt-4">


                <button type="button" class="btn btn-submit" data-bs-toggle="modal" data-bs-target="#submitModal">
                    Submit </button>


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


</div>
</div>
<div class="modal fade" id="submitModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" id="submit_btn" class="btn btn-success p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    const users = @json($users);

    function loadUser() {

        let enteredId = $('#user_id').val().trim();

        // Don't show anything if the field is empty
        if (enteredId === '') {
            $('#user_name')
                .val('')
                .removeClass('text-danger');
            return;
        }

        let user = users.find(u =>
            String(u.user_id).trim().toLowerCase() === enteredId.toLowerCase()
        );

        if (user) {
            if (Number(user.is_active) === 1) {
                $('#user_name')
                    .val(user.name)
                    .removeClass('text-danger');
            } else {
                $('#user_name')
                    .val('User is inactive')
                    .addClass('text-danger');
            }
        } else {
            $('#user_name')
                .val('User not found')
                .addClass('text-danger');
        }
    }

    $('#user_id').on('input', loadUser);

    $(document).ready(function() {
        loadUser();
    });
</script>

<script>
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('investForm').submit();
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {

        const uploadBox = document.getElementById("uploadBox");
        const input = document.getElementById("receiptInput");
        const preview = document.getElementById("previewImage");
        const removeBtn = document.getElementById("removeImage");
        const uploadContent = document.getElementById("uploadContent");

        // Open file picker
        uploadBox.addEventListener("click", function(e) {
            if (!e.target.closest(".remove-image")) {
                input.click();
            }
        });

        // Preview selected image
        input.addEventListener("change", function() {
            if (this.files.length) {
                showPreview(this.files[0]);
            }
        });

        // Drag events
        uploadBox.addEventListener("dragover", function(e) {
            e.preventDefault();
            uploadBox.classList.add("dragover");
        });

        uploadBox.addEventListener("dragleave", function() {
            uploadBox.classList.remove("dragover");
        });

        uploadBox.addEventListener("drop", function(e) {
            e.preventDefault();
            uploadBox.classList.remove("dragover");

            const file = e.dataTransfer.files[0];

            if (file && file.type.startsWith("image/")) {

                const dt = new DataTransfer();
                dt.items.add(file);
                input.files = dt.files;

                showPreview(file);
            }
        });

        function showPreview(file) {

            const reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.classList.remove("d-none");
                removeBtn.classList.remove("d-none");
                uploadContent.classList.add("d-none");
            };

            reader.readAsDataURL(file);
        }

        // Remove image
        removeBtn.addEventListener("click", function(e) {
            e.stopPropagation();

            input.value = "";

            preview.src = "";
            preview.classList.add("d-none");

            removeBtn.classList.add("d-none");

            uploadContent.classList.remove("d-none");
        });

    });
</script>

@endsection