@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@section('content')

    <style>
        .upload-box {
            border: 2px dashed #d3d6db;
            border-radius: 10px;
            cursor: pointer;
        }

        .upload-area {
            padding: 30px;
            text-align: center;
        }

        .upload-area:hover {
            background: #f8f9fa;
        }

        .upload-area.dragging {
            border: 2px dashed #f59e0b;
            background: #fff7ed;
        }

        #previewImage {
            max-height: 200px;
            margin-top: 10px;
        }

        #fileName {
            margin-top: 10px;
            font-weight: bold;
            color: #444;
        }

        /* Match select2 to form-select look */
        .select2-container .select2-selection--single {
            height: 42px !important;
            border-radius: 6px !important;
            border: 1px solid #d3d6db !important;
            background: #fff !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #333 !important;
            line-height: 40px !important;
            padding-left: 14px !important;
            padding-right: 40px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
            right: 10px;
        }

        .select2-container--default .select2-selection--single .select2-selection__clear {
            position: absolute !important;
            right: 28px !important;
            top: 50% !important;
            transform: translateY(-50%);
            float: none !important;
            color: #333;
            font-size: 16px;
        }

        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #f59e0b !important;
            box-shadow: 0 0 0 .18rem rgba(245, 158, 11, .15) !important;
        }

        .select2-dropdown {
            border-radius: 6px !important;
            border: 1px solid #d3d6db !important;
            overflow: hidden;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border-radius: 6px !important;
            border: 1px solid #d3d6db !important;
            padding: 8px 12px !important;
            outline: none;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: #f59e0b !important;
            box-shadow: 0 0 0 .18rem rgba(245, 158, 11, .15) !important;
        }

        .select2-container--default .select2-results__option {
            padding: 8px 14px;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background: #f59e0b !important;
            color: #fff !important;
        }

        .select2-container--default .select2-results__option[aria-selected="true"] {
            background: rgba(245, 158, 11, .08);
        }
    </style>

    <div class="container mt-4">
 <div class="col-auto">
            <h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('view_doc') }}">
                        <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 icons-tabler-outline icon-tabler-chevron-left">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M15 6l-6 6l6 6"></path>
                        </svg>
                    </a>
                </button>
               Upload Document
            </h5>
        </div>

        <div class="card p-4 shadow-sm">

            <form method="POST" action="{{ route('store_document') }}" enctype="multipart/form-data">
                @csrf

                <!-- <input type="hidden" name="project_id" value="{{ $project->id ?? '' }}"> -->
                <input type="hidden" name="temp_image" value="{{ session('temp_image') }}">
                <div class="col-lg-4 mb-4">
                    <label class="form-label">Choose Project</label>

                    <select name="project_id" id="project_id" class="form-select @error('project_id') is-invalid @enderror">

                        <option value="">Select</option>

                        @foreach ($projects as $proj)
                            <option value="{{ $proj->id }}" {{ old('project_id', $project->id ?? '') == $proj->id ? 'selected' : '' }}>
                                {{ $proj->project_name }}
                            </option>
                        @endforeach

                    </select>

                    @error('project_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                {{-- Document Name --}}
                <div class="mb-3">
                    <label class="form-label">Document Name</label>
                    <input type="text" name="document_name"
                        class="form-control @error('document_name') is-invalid @enderror" value="{{ old('document_name') }}"
                        placeholder="Enter Document Name">

                    @error('document_name')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Upload --}}
                <label class="form-label">Upload Document</label>

                <label class="upload-box w-100">

                    <input type="file" name="image" id="fileInput" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" hidden>

                    <div class="upload-area">

                        <div id="uploadIcon">⬆ Upload</div>

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

                        <!-- FILE NAME -->
                        <div id="fileName" class="d-none"></div>

                        <div id="uploadtexts">
                            <h6>Drag & Drop or Click</h6>
                            <small>JPG, PNG, PDF, DOC (Max 10MB)</small>
                        </div>

                    </div>
                </label>

                @error('image')
                    <div class="text-danger mt-2">{{ $message }}</div>
                @enderror

                <div class="text-center mt-4">
                    <button type="submit" id="submitBtn" class="btn btn-warning w-100">
                        Submit
                    </button>
                </div>

            </form>

        </div>
    </div>

    {{-- JS --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
        $('#project_id').select2({
            placeholder: "Select Project",
            allowClear: true,
            width: '100%'
        });
            let uploadArea = $('.upload-area');
            let fileInput = $('#fileInput');
            let isSubmitting = false;

            // 🔥 DRAG OVER
            uploadArea.on('dragover', function (e) {
                e.preventDefault();
                $(this).addClass('dragging');
            });

            // 🔥 DRAG LEAVE
            uploadArea.on('dragleave', function (e) {
                e.preventDefault();
                $(this).removeClass('dragging');
            });

            // 🔥 DROP
            uploadArea.on('drop', function (e) {
                e.preventDefault();
                $(this).removeClass('dragging');

                let files = e.originalEvent.dataTransfer.files;

                if (files.length > 0) {
                    fileInput[0].files = files;
                    previewFile(files[0]);
                }
            });

            // 🔥 INPUT CHANGE
            fileInput.on('change', function () {
                let file = this.files[0];
                if (file) {
                    previewFile(file);
                }
            });

            // 🔥 PREVIEW FUNCTION
            function previewFile(file) {

                let fileType = file.type;
                let fileName = file.name;

                $('#previewImage').addClass('d-none');
                $('#fileName').addClass('d-none');

                // IMAGE
                if (fileType.startsWith('image/')) {

                    let reader = new FileReader();

                    reader.onload = function (e) {
                        $('#previewImage')
                            .attr('src', e.target.result)
                            .removeClass('d-none');
                    };

                    reader.readAsDataURL(file);

                } else {
                    // PDF / DOC
                    $('#fileName')
                        .removeClass('d-none')
                        .html('📄 ' + fileName);
                }

                $('#uploadIcon').hide();
                $('#uploadtexts').hide();
            }

            // 🔥 SUBMIT PROTECTION
            $('form').on('submit', function () {

                if (isSubmitting) return false;

                isSubmitting = true;

                let btn = $('#submitBtn');
                btn.prop('disabled', true);
                btn.html('Processing...');
            });

        });
    </script>

@endsection