@extends('User.layout')
<style>
    .upload-area {
        border: 2px dashed #ccc;
        border-radius: 12px;
        padding: 30px;
        text-align: center;
        position: relative;
        transition: 0.3s;
        min-height: 220px;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .upload-area:hover {
        border-color: #6366f1;
        background: #f9fafb;
    }

    .upload-icon {
        font-size: 40px;
        color: #6366f1;
    }

    /* Preview Image */
    .preview-img {
        display: none;
        max-width: 100%;
        max-height: 180px;
        object-fit: contain;
        border-radius: 10px;
    }
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>
                <!-- <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                            <a href="{{ url()->previous() }}"> <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" class="icon icon-tabler">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M15 6l-6 6l6 6" />
                                </svg>
                            </a>
                        </button> -->
                Sell Unit Request
            </h5>
        </div>

        <div class="col-auto">
            <a href="{{ route('sell_unit_report') }}"><button class="btn btn-primary">Report</button></a>
        </div>
    </div>
    <div class="card p-0 m-2">

        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-1">
                <select id="pageLength" class="form-select">
                    <option value="10"> 10</option>
                    <option value="25"> 25</option>
                    <option value="50"> 50</option>
                    <option value="100"> 100</option>
                </select>
            </div>

            <div class="col-md-3 ms-auto">
                <input type="text" id="toDate" class="form-control" placeholder="Search">
            </div>
        </div>


        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="usersTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Date</th>
                                    <th>Sold To</th>
                                    <th>Price</th>
                                    <th>User ID</th>
                                    <th>User Name</th>
                                    <!-- <th>Unit</th> -->
                                    <th>Action</th>

                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="paymentModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content p-4 position-relative">

                <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal"></button>

                <h5 class="mb-4 text-center">Payment Details</h5>

                <form action="{{route('submit_payment')}}" method="Post" id="AcceptForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="transfer_id" id="transfer_id">
                    <div class="mb-3">
                        <label class="form-label">Payment Mode</label>
                        <select name="payment_mode" class="form-select">
                            <option value="">Select</option>
                            <option value="UPI" {{ old('payment_mode') == 'UPI' ? 'selected' : '' }}>UPI</option>
                            <option value="Bank Transfer" {{ old('payment_mode') == 'Bank Transfer' ? 'selected' : '' }}>Bank
                                Transfer</option>
                            <option value="Cash" {{ old('payment_mode') == 'Cash' ? 'selected' : '' }}>Cash</option>
                        </select>
                        @error('payment_mode')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Transaction ID</label>
                        <input type="text" name="transaction_id" class="form-control" value="{{ old('transaction_id') }}">
                        @error('transaction_id')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <!-- Upload Box -->
                    <div class="mb-4">
                        <label class="form-label">Upload Screenshot</label>
                        <div class="upload-area mb-3 text-center p-4 border rounded position-relative"
                            onclick="document.getElementById('fileInput').click();" id="uploadArea"
                            style="cursor:pointer; overflow:hidden;">

                            <div id="uploadContent" style="{{ old('receipt') ? 'display:none;' : '' }}">
                                <i class="ti tabler-upload upload-icon" style="font-size:40px;"></i>
                                <h5 class="mt-2">Upload</h5>
                                <p class="text-muted small">
                                    Choose photo size should be less than <br>
                                    <strong>2 MB</strong> and should be in <strong>JPG, PNG, JPEG</strong> format.
                                </p>
                            </div>

                            <!-- Preview Image -->
                            <img id="previewImg" src="{{ old('receipt') ? asset('storage/' . old('receipt')) : '' }}"
                                class="img-fluid rounded"
                                style="{{ old('receipt') ? '' : 'display:none;' }} max-height:200px; object-fit:contain;">

                            <input type="file" name="receipt" id="fileInput" accept=".jpg,.jpeg,.png" style="display:none"
                                onchange="previewImage(event)">
                            @error('receipt')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>



                    <div class="d-flex justify-content-center">
                        <button type="submit" class="btn btn-label-secondary me-2" data-bs-dismiss="modal">Discard</button>
                        <button type="submit" id="submit_btn" class="btn btn-primary">Submit</button>
                    </div>

                </form>

            </div>
        </div>
    </div>
    <script>
        function setAcceptId(button) {
            document.getElementById('transfer_id').value = button.getAttribute('data-id');
        }

        document.getElementById('AcceptForm').addEventListener('submit', function () {
            const btn = document.getElementById('submit_btn');
            btn.disabled = true;
            btn.innerText = 'processing...';
        });
    </script>
    <script>
        function previewImage(event) {
            const file = event.target.files[0];

            if (!file) return;

            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
            if (!allowedTypes.includes(file.type)) {
                alert('Invalid file type. Only JPG, JPEG, PNG are allowed.');
                event.target.value = '';
                return;
            }

            const maxSize = 2 * 1024 * 1024;
            if (file.size > maxSize) {
                alert('File size must be less than 2MB.');
                event.target.value = '';
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                const previewImg = document.getElementById('previewImg');
                const uploadContent = document.getElementById('uploadContent');

                previewImg.src = e.target.result;
                previewImg.style.display = 'block';

                uploadContent.style.display = 'none';
            };

            reader.readAsDataURL(file);
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {



            const table = $('#usersTable').DataTable({
                ajax: "{{route('sell_unit_request_data')}}",
                searching: true,
                paging: true,
                info: true,
                lengthChange: false,
                pageLength: 10,
                ordering: false,

                columns: [{
                    data: "DT_RowIndex",
                    name: "DT_RowIndex",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "date",
                    name: "date"
                },
                {
                    data: "sell_to",
                    name: "sell_to"
                },
                {
                    data: "price",
                    name: "price"
                },
                {
                    data: "user_id",
                    name: "user_id"
                },
                {
                    data: "user_name",
                    name: "user_name"
                },
                // {
                //     data: "unit",
                //     name: "unit"
                // },
                {
                    data: "action",
                    name: "action",
                    orderable: false,
                    searchable: false
                }
                ]
            });

            // Custom search input
            $('#toDate').on('keyup change', function () {
                table.search(this.value).draw();
            });

        });
    </script>
@endsection