@extends('layout.layout')
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<div class=" m-3">

    {{-- Station Profile Page Container --}}
    <x-station-profile-page-container>
        <div class="row mx-2 mt-4">
            <!-- Left Column (Logo and Quick Info) -->
            <div class="col-lg-3 mb-4">
                <div class="sticky-top" style="top: 20px;">
                    <div class="logo-container mb-3" data-bs-toggle="modal" data-bs-target="#logoModal_sdo">
                                                {{-- Skeleton --}}
                        <div class="skeleton skeleton-circle"></div>
                        {{-- Actual Content --}}
                        <div class="actual-content">
                            @if ($profileService->stationLogoPic && file_exists(public_path($imageLogoPath . $profileService->stationLogoPic)))
                                <img src="{{ asset($imageLogoPath . $profileService->stationLogoPic) }}" alt="Logo Picture"
                                    class="logopic_" style="width:auto; height: 180px; background-color: white;">
                            @else
                                <i class="fas fa-image mb-3"></i>
                            @endif
                        </div>

                        <p class="text-muted mb-0 small mt-2">{{ __('Click to change Logo Picture') }}</p>
                    </div>

                    <!-- Quick School Info Card -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            {{-- Skeleton --}}
                            <div class="skeleton skeleton-text large mb-3 mx-auto" style="width: 80%;"></div>
                            <div class="skeleton skeleton-text small mb-2 mx-auto" style="width: 60%;"></div>
                            <div class="skeleton skeleton-text small mb-2 mx-auto" style="width: 70%;"></div>

                            {{-- Actual Content --}}
                            <h6 id='stationNameL' class="fw-bold mb-2 actual-content" style="color: #0071bd;"></h6>
                            <p id='stationLocationL' class="small text-muted mb-2 actual-content"></p>
                            <p id='stationEmailL' class="small text-muted mb-2 actual-content"></p>
                            <hr class="my-2 actual-content">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column (Profile Details) -->
            <div class="col-lg-9">
                {{-- Section description --}}
                <p class="text-muted mb-2">{{ __('Manage your profile, including contact details, location, and administrative information.') }}</p>

                <!-- Basic Information -->
                <x-sch-profile-section icon="info-circle" title="{{ __('Basic Information') }}">
                    <x-profile-info-field
                        icon="building"
                        label="{{ __('Office Name') }}"
                        data-field="stationName"
                        col-class="col-md-12"
                    />

                    <x-profile-info-field
                        icon="envelope"
                        label="{{ __('Email Address') }}"
                        data-field="stationEmail"
                        skeleton-width="80%"
                    />

                    <x-profile-info-field
                        icon="phone"
                        label="{{ __('Contact Number') }}"
                        data-field="stationMobileNumber"
                        skeleton-width="60%"
                    />
                </x-sch-profile-section>

                <!-- Location Details -->
                <x-sch-profile-section icon="map" title="{{ __('Location Details') }}">

                    <!--  -->
                    <x-profile-admin-offices />

                    <p class="text-muted" style="margin-bottom: 0;">{{ __('Station Address') }}</p>
                    <x-profile-info-field
                        icon="map-signs"
                        label="{{ __('Region') }}"
                        data-field="stationRegion"
                        skeleton-width="90%"
                        col-class="col-md-6"
                    />

                    <x-profile-info-field
                        icon="city"
                        label="{{ __('Province') }}"
                        data-field="stationProvince"
                        skeleton-width="75%"
                        col-class="col-md-6"
                    />

                    <x-profile-info-field
                        icon="building"
                        label="{{ __('City/Municipality') }}"
                        data-field="stationCityMun"
                        skeleton-width="80%"
                        col-class="col-md-6"
                    />

                    <x-profile-info-field
                        icon="home"
                        label="{{ __('Barangay') }}"
                        data-field="stationBarangay"
                        skeleton-width="65%"
                        col-class="col-md-6"
                    />

                    <x-profile-info-field
                        icon="map-pin"
                        label="{{ __('Complete Address') }}"
                        data-field="stationCompleteAddress"
                        col-class="col-12"
                    />
                </x-sch-profile-section>

                <!-- Administration -->
                <x-sch-profile-section icon="user-shield" title="{{ __('Administration') }}">
                    <x-profile-info-field
                        icon="user"
                        label="{{ __('Office Head') }}"
                        id="officeHead"
                    />

                    <x-profile-info-field
                        icon="calendar"
                        label="{{ __('Year Established') }}"
                        id="yearEstablished"
                    />
                </x-sch-profile-section>

                <!-- Action Buttons -->
                <div class="d-flex justify-content-end gap-2 mt-2" >
                    <!-- <div class="skeleton skeleton-btn" style="width: 150px;"></div> -->
                    <div class="skeleton skeleton-btn mb-3" style="width: 180px;"></div>

                    <!-- <button class="btn btn-outline-primary actual-content">
                        <i class="fas fa-eye me-2"></i>View Full Profile
                    </button> -->
                    <!-- Update Button -->
                    <button class="btn btn-primary editbtn actual-content" id="openUpdateModalBtn">
                        <i class="fas fa-edit me-2"></i>{{ __('Update Profile') }}
                    </button>
                </div>
            </div>
        </div>
    </x-station-profile-page-container>

    <script>

        //image cropper
        document.addEventListener('DOMContentLoaded', function () {
            const imageToCrop = document.getElementById('image-to-crop-logo');
            const rotateLeftButton = document.getElementById('rotate-left-button-logo');
            const rotateRightButton = document.getElementById('rotate-right-button-logo');
            const croppedImageDataInput = document.getElementById('cropped-image-data-logo');
            const originalFileNameInput = document.getElementById('original-file-name-logo');
            const imagecropsect = document.getElementById('imagecropsect-logo');
            const uploadContainer = document.getElementById('upload-container-logo');
            const fileInput = document.getElementById('profpicid-logo');
            const buttonupl_profpic = document.getElementById('buttonupl_profpic-logo');
            let cropper;

            uploadContainer.addEventListener('click', function () {
                fileInput.click();
            });

            fileInput.addEventListener('change', function (event) {
                const files = event.target.files;
                if (files && files.length > 0) {
                    const file = files[0];

                    //file validation
                    const validExtensions = ['image/jpeg', 'image/png', 'image/jpg'];



                    if (!validExtensions.includes(file.type)) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Invalid File Type',
                            text: 'Please upload a file with .jpg, .jpeg, or .png',
                            confirmButtonColor: "#d33"
                        });
                        fileInput.value = ''; // Clear the input
                        return;
                    }

                    const tst = document.getElementById('imgtypstlogo');
                    if (tst) {
                        tst.style.display = 'none'; // Hide the image type message
                    }

                    originalFileNameInput.value = file.name;

                    const reader = new FileReader();

                    imagecropsect.style.display = 'flex';
                    buttonupl_profpic.style.display = 'block';
                    uploadContainer.style.padding = '10px';


                    reader.onload = function (e) {
                        imageToCrop.src = e.target.result;

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

                        cropper = new Cropper(imageToCrop, {
                            aspectRatio: 1,
                            viewMode: 1,
                        });

                    };
                    reader.readAsDataURL(file);
                }
            });

            rotateLeftButton.addEventListener('click', function () {
                if (cropper) {
                    cropper.rotate(-90);
                }
            });

            rotateRightButton.addEventListener('click', function () {
                if (cropper) {
                    cropper.rotate(90);
                }
            });

        document.getElementById('logoPicForm').addEventListener('submit', function (event) {
                event.preventDefault();
                if (cropper) {
                    const canvas = cropper.getCroppedCanvas();

                    if (canvas) {
                        // Detect file type from original file name
                        const fileName = originalFileNameInput.value || 'cropped-image.jpg';
                        const isPng = fileName.toLowerCase().endsWith('.png');

                        canvas.toBlob(async function (blob) {
                            if (!blob) return;

                            // If PNG and under 100KB, upload directly
                            if (isPng && blob.size <= 100 * 1024) {
                                uploadImage(blob, fileName, 'image/png');
                            }
                            // If JPEG and under 100KB, upload directly
                            else if (!isPng && blob.size <= 100 * 1024) {
                                uploadImage(blob, fileName, 'image/jpeg');
                            } else {
                                // Create compression canvas
                                const compressionCanvas = document.createElement('canvas');
                                const ctx = compressionCanvas.getContext('2d');
                                compressionCanvas.width = canvas.width;
                                compressionCanvas.height = canvas.height;

                                // Only fill white for JPEG, not PNG
                                if (!isPng) {
                                    ctx.fillStyle = '#FFFFFF';
                                    ctx.fillRect(0, 0, compressionCanvas.width, compressionCanvas.height);
                                }
                                ctx.drawImage(canvas, 0, 0);

                                // Iterative compression function
                                async function compressIteratively(quality = 0.9) {
                                    return new Promise(resolve => {
                                        compressionCanvas.toBlob(async function (compressedBlob) {
                                            if (!compressedBlob) return resolve(null);

                                            if (compressedBlob.size <= 100 * 1024 || quality <= 0.1) {
                                                resolve(compressedBlob);
                                            } else {
                                                // Decrease quality and try again (only for JPEG)
                                                if (!isPng) {
                                                    resolve(await compressIteratively(quality - 0.05));
                                                } else {
                                                    resolve(compressedBlob); // For PNG, just return as is
                                                }
                                            }
                                        }, isPng ? 'image/png' : 'image/jpeg', isPng ? undefined : quality);
                                    });
                                }

                                const finalBlob = await compressIteratively();

                                if (finalBlob) {
                                    uploadImage(finalBlob, fileName, isPng ? 'image/png' : 'image/jpeg');
                                } else {
                                    console.error('Could not compress image below 100KB');
                                }
                            }
                        }, isPng ? 'image/png' : 'image/jpeg');
                    }
                }
            });

            function uploadImage(blob, fileName, mimeType) {
                const file = new File([blob], fileName, { type: mimeType });
                buttonupl_profpic.style.cursor = 'not-allowed';
                buttonupl_profpic.innerHTML = 'Saving...';
                buttonupl_profpic.disabled = true;

                const formData = new FormData();
                formData.append('original_file_name', fileName);
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('image', file);

                fetch("{{ route('image.storeLogo') }}", {
                    method: 'POST',
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Image Uploaded',
                            text: 'Image Uploaded Successfully',
                            confirmButtonColor: "#3085d6",
                            showConfirmButton: true
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Upload Failed',
                            text: 'Image Upload Failed',
                            confirmButtonColor: "#d33",
                            showConfirmButton: true,
                        });
                    }
                })
                .catch(error => {
                    console.error('Upload error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Unexpected Error',
                        text: 'Something went wrong. Please try again.',
                        confirmButtonColor: "#d33",
                        showConfirmButton: true,
                    });
                });




            }
        });
    </script>

    @if (session('authority_level') == 3)
    @include('section.lrhub-table')
    @endif

    @include('pages.view.view-station')

</div>
    <!-- Include Modal -->
    @include('modals.update-school-profile-modal') {{-- School profile modal for update --}}
    @include('modals.profile-logo-modal')  {{-- Logo modal for update --}}
    @include('section.add-sy-modal')  {{-- Add School Year Modal --}}

@endsection

<style>
    /* Table Styles */
    .table tbody tr td {
        border-width: 1px !important;
        border-style: solid;
        border-color: #efefef;
    }

    /* Utility Classes */
    .shadow-dark {
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .info-label {
        font-weight: 600;
        color: #555;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .info-value {
        color: #333;
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
        background: #f8f9fa;
        border-radius: 0.375rem;
        min-height: 2.5rem;
        display: flex;
        align-items: center;
    }

    .field-na {
        color: #6b7280;
        opacity: 0.6;
    }

    /* Logo Container */
    .logo-container {
        background: #f8f9fa;
        border: 3px dashed #dee2e6;
        border-radius: 0.5rem;
        padding: 2rem;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .logo-container:hover {
        border-color: #0071bd;
        background: #e3f2fd;
    }

    .logo-container i {
        font-size: 80px;
        color: #8b8b8b;
    }

    /* Section Cards */
    .section-card {
        border-left: 4px solid #0071bd;
        margin-bottom: 1.5rem;
    }

    .section-header {
        background: linear-gradient(135deg, #0071bd 0%, #005a94 100%);
        color: white;
        padding: 0.75rem 1rem;
        font-weight: 600;
        border-radius: 0.375rem 0.375rem 0 0;
        margin: -1rem -1rem 1rem -1rem;
    }

    /* Stat Cards */
    .stat-card {
        text-align: center;
        padding: 1.5rem;
        background: white;
        border-radius: 0.5rem;
        border: 1px solid #e9ecef;
        transition: transform 0.2s;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .stat-icon {
        font-size: 2.5rem;
        color: #0071bd;
        margin-bottom: 0.5rem;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #333;
    }

    .stat-label {
        font-size: 0.85rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Buttons */
    .editbtn {
        background: #0071bd !important;
        color: white;
        border: none;
        padding: 0.5rem 1.5rem;
        border-radius: 0.375rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .editbtn:hover {
        background: #005a94;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,113,189,0.3);
    }

    /* Badges */
    .badge-custom {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 20px;
    }

    /* Skeleton Loading */
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        border-radius: 0.375rem;
        display: none;
    }

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .skeleton-text {
        height: 1rem;
        margin-bottom: 0;
    }

    .skeleton-text.large {
        height: 1.5rem;
    }

    .skeleton-text.small {
        height: 0.75rem;
    }

    .skeleton-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 1rem;
    }

    .skeleton-btn {
        height: 38px;
        border-radius: 0.375rem;
    }

    /* Loading State */
    .loading .actual-content {
        display: none !important;
    }

    .loading .skeleton {
        display: block !important;
    }

    .actual-content {
        display: block;
    }
</style>


@push('scripts')
    {{-- Pass Laravel data to JavaScript --}}
    <script>
        window.CONFIG = {
            csrf: "{{ csrf_token() }}",
            stationId: "{{ session('station_id') }}",
            userId: "{{ auth()->id() ?? '' }}",
            routes: {
                getRegionalOffices: "{{ route('get.ref.regional-offices') }}",
                getRegions: "{{ url('/api/regions') }}",
                getProvinces: "{{ route('get-province-geolevel') }}",
                getDivisions: "{{ route('divisions.by_region') }}",
                getDistricts: "{{ route('districts.by_division') }}",
                getMunicipalities: "{{ route('get-municipal-geolevel') }}",
                getBarangays: "{{ route('get-brgy-geolevel') }}"
            }
        };
    </script>

    {{-- Page-level module --}}
    <script type="module" src="{{ asset('assets/js/modules/station-profile.js') }}"></script>

    {{-- Inline module for modal --}}
        <script type="module">
            import UpdateSchoolProfileModal from "{{ asset('assets/js/components/update-school-profile-modal.js') }}";

            document
                .getElementById('openUpdateModalBtn')
                ?.addEventListener('click', () => {
                    UpdateSchoolProfileModal.openModal();
                });
        </script>


@endpush