@extends('layouts.app')
@section('content')
    <div class="main-container container">
        <div class="row mb-3">
            <div class="col align-self-center text-center">
                <h5>My Profile</h5>
            </div>
        </div>
        <div class="row mb-1 justify-content-center">
            <div class="col-12">
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <!-- First Column (Employee Photo) -->
                            <div class="col-md-2 col-12 text-center mb-3 mb-md-0">
                                <div class="avatar avatar-100 shadow-xl rounded border border-primary p-1">

                                    @if (!empty(Auth::user()->photo) && file_exists(public_path('uploads/photo/' . Auth::user()->photo)))
                                        <img src="{{ asset('uploads/photo/' . Auth::user()->photo) }}" alt="User Photo"
                                            class="img-fluid rounded">
                                    @else
                                        <img src="{{ asset('assets/img/default.png') }}" alt="Default Photo"
                                            class="img-fluid rounded">
                                    @endif

                                </div>
                            </div>
                            <!-- Second Column (Employee Info & Edit Button) -->
                            <div class="col-md-6 col-12  text-md-left mb-3 mb-md-0">
                                <p class="mb-1 text-color-theme "><b>Employee Name:</b> {{ Auth::user()->name }}</p>
                                <p class="mb-1 text-color-theme"><b>HQ Name: </b>{{ Auth::user()->hq_name }}</p>
                                <div class="d-inline-flex flex-wrap gap-2">

                                    @if (Auth::user()->photo_status != 'Approved')
                                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editPhotoModal">
                                        Add Photo
                                    </button>
                                @endif
                                

                                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#viewPhotoModal">
                                        Sample Photo
                                    </button>
                                </div>
                            </div>
                            <!-- Third Column (Status + Sample Photo Button) -->
                            <div class="col-md-4 col-12 text-center">
                              
                                @if (Auth::user()->photo_status == 'Approved')
                                    <span class="badge bg-success">Approved</span>
                                @elseif (Auth::user()->photo_status == 'Rejected')
                                    <span class="badge bg-danger">Rejected</span>
                                @else
                                <span class="badge bg-warning">Pending</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Edit Photo Modal -->
        <div class="modal fade" id="editPhotoModal" tabindex="-1" aria-labelledby="editPhotoModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editPhotoModalLabel">Edit Photo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="photo-upload-form" method="POST" action="{{ route('home.update', Auth::user()->id) }}"
                            enctype="multipart/form-data">
                            @csrf

                            @method('PUT')
                            <!-- This is needed to make the form a PUT request for update -->
                            <label>Select Photo</label>
                            <input type="file" name="photo" id="photo" class="form-control mb-3" accept="image/*">
                            <div id="crop-container" style="display: none;">
                                <img id="cropped-image" style="max-width: 100%;" />
                            </div>
                            <input type="hidden" name="cropped_data" id="cropped_data">
                            <button type="submit" class="btn btn-primary">Upload Photo</button>
                        </form>
                        <img id="photo-to-crop" src="" style="max-width: 50%;" />

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

        <!-- Preview Sample Photo Modal -->
        <div class="modal fade" id="viewPhotoModal" tabindex="-1" aria-labelledby="viewPhotoModalLabel" 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="viewPhotoModalLabel"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <img src="{{ asset('assets/img/Photo-SAMPLE-2.png') }}" alt="Sample Photo"
                            class="img-fluid rounded shadow">
                    </div>
                </div>
            </div>
        </div>


        <!-- Include Cropper.js -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

        <script>
            let cropper;
            document.getElementById('photo').addEventListener('change', function(e) {
                let reader = new FileReader();
                reader.onload = function(event) {
                    let image = document.getElementById('cropped-image');
                    image.src = event.target.result;

                    document.getElementById('crop-container').style.display = 'block';

                    if (cropper) {
                        cropper.destroy();
                    }

                    cropper = new Cropper(image, {
                        aspectRatio: 1,
                        viewMode: 1,
                    });
                };
                reader.readAsDataURL(e.target.files[0]);
            });

            document.getElementById('photo-upload-form').addEventListener('submit', function(e) {
                e.preventDefault();

                if (!cropper) {
                    alert("Please select and crop the image first!");
                    return;
                }

                let croppedCanvas = cropper.getCroppedCanvas({
                    width: 1024,
                    height: 1024
                });

                let croppedImage = croppedCanvas.toDataURL('image/jpeg');

                document.getElementById('cropped_data').value = croppedImage;

                let formData = new FormData(this);
                formData.append('_method', 'PUT'); // Laravel requires _method for PUT requests

                fetch("{{ route('home.update', Auth::user()->id) }}", {
                        method: "POST", // Keep POST since Laravel will use _method PUT
                        body: formData,
                        headers: {
                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            location.reload();
                        } else {
                            alert("Error uploading photo");
                        }
                    })
                    .catch(error => console.error("Error:", error));
            });
        </script>

        <div class="row mb-1 justify-content-center">

            <div class="col-12">

                <div class="card mb-3">
                    <div class="card-body">
                        <div class="text-left mb-3">
                            <h3>Download Video</h3>
                        </div>
                        <table class="table table-striped text-center">
                            <thead>
                                <tr>
                                    <th scope="col">Product Name</th>
                                    <th scope="col">Download</th>
                                    <th scope="col">Expiry</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($poster as $posters)
                                    <tr>
                                        <td class="text-left">{{ $posters->postername ?? 'N/A' }}</td>
                                        <td class="text-left">
                                            @if ($posters->video_name)
                                                <a href="{{ route('video.download', $posters->id) }}"
                                                    class="btn btn-primary btn-sm" download>
                                                    <i class="fa fa-arrow-down" aria-hidden="true"></i>
                                                </a>
                                            @else
                                                <button class="btn btn-danger btn-sm" disabled>
                                                    <i class="fa fa-times" aria-hidden="true"></i>
                                                </button>
                                            @endif
                                        </td>
                                        <td class="text-left">
                                            {{ $posters->exp_date ? \Carbon\Carbon::parse($posters->exp_date)->format('d F Y') : 'No Expiry' }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Include Cropper.js CSS -->
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">

    <!-- Include Cropper.js JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script> --}}

    {{-- <script>
        let cropper;

        // Listen for file input change event
        document.getElementById('photo').addEventListener('change', function(e) {
            let reader = new FileReader();
            reader.onload = function(event) {
                // Load the image in Cropper.js
                let photo = document.getElementById('photo-to-crop');
                photo.src = event.target.result;

                // Initialize the cropper
                cropper = new Cropper(photo, {
                    aspectRatio: 16 / 9, // Set aspect ratio (optional)
                    viewMode: 1, // Set view mode (optional)
                    responsive: true,
                    cropBoxResizable: true,
                });
            };
            reader.readAsDataURL(e.target.files[0]);
        });
    </script> --}}
@endsection