@extends('layouts.user_type.auth')

@section('companyProfile.company')

<div class="row">
    <div class="col-12">

        @include('components.alert')

        @if($showMessageFlag && isset($companyProfile))
            <div class="alert alert-warning alert-dismissible fade show mx-4" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>
                You need to subscribe this company before accessing other sections.
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="cp-card">

            {{-- Tab Nav --}}
            @include('pages.companyProfile.partials.nav_tabs', [
                'active'          => 'company',
                'showMessageFlag' => $showMessageFlag ?? false,
                'company_name'    => isset($companyProfile) ? $company_name : 'Create Company Profile',
            ])

            <div class="cp-card-body">

                <form action="{{ isset($companyProfile->id)
                        ? route('companyProfile.company.storeOrUpdate', $companyProfile->id)
                        : route('companyProfile.company.storeOrUpdate') }}"
                      method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-4">

                        {{-- ── Column 1 ─────────────────────────────── --}}
                        <div class="col-md-4">

                            <div class="cp-form-group">
                                <label class="cp-label">Company Name <span class="text-danger">*</span></label>
                                <input type="text" class="cp-form-control" name="company_name"
                                    value="{{ $companyProfile->company_name ?? '' }}"
                                    placeholder="Enter company name" required>
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">Company Logo</label>
                                <div class="d-flex align-items-center gap-2 mt-1">
                                    <label for="logoInput" class="cp-btn cp-btn-success" style="cursor:pointer;margin:0">
                                        <i class="fas fa-upload"></i> Upload
                                    </label>
                                    <input type="file" id="logoInput" name="company_logo_file"
                                           accept="image/*" style="display:none"
                                           onchange="handleLogoSelection(this)">
                                    <input type="hidden" id="savedLogoUrl" name="company_logo"
                                           value="{{ $companyProfile->company_logo ?? '' }}">
                                    <button type="button" class="qc-btn-edit cp-btn cp-btn-success d-none" id="viewLogoBtn" onclick="viewLogo()">
                                        <i class="fas fa-eye"></i> View
                                    </button>
                                    <button type="button" class="cp-btn cp-btn-danger d-none" id="cancelLogoBtn" onclick="cancelLogoSelection()">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">Company Description</label>
                                <textarea class="cp-form-control" name="company_description" rows="5"
                                    placeholder="Enter company description">{{ $companyProfile->company_description ?? '' }}</textarea>
                            </div>

                        </div>

                        {{-- ── Column 2 ─────────────────────────────── --}}
                        <div class="col-md-4">

                            <div class="cp-form-group">
                                <label class="cp-label">Phone <span class="text-danger">*</span></label>
                                <input type="text" class="cp-form-control" name="phone"
                                    value="{{ $companyProfile->phone ?? '' }}"
                                    placeholder="Enter phone number" required>
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">Email <span class="text-danger">*</span></label>
                                <input type="email" class="cp-form-control" name="email"
                                    value="{{ $companyProfile->email ?? '' }}"
                                    placeholder="Enter email address" required>
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">Website</label>
                                <input type="text" class="cp-form-control" name="website"
                                    value="{{ $companyProfile->website ?? '' }}"
                                    placeholder="https://example.com">
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">Company Representative <span class="text-danger">*</span></label>
                                <select class="cp-form-control select21" name="company_representative" required>
                                    <option value="">Select Representative</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}"
                                            {{ isset($companyProfile) && $companyProfile->company_representative == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                        </div>

                        {{-- ── Column 3 ─────────────────────────────── --}}
                        <div class="col-md-4">

                            <div class="cp-form-group">
                                <label class="cp-label">Address <span class="text-danger">*</span></label>
                                <input type="text" class="cp-form-control" name="address"
                                    value="{{ $companyProfile->address ?? '' }}"
                                    placeholder="Street address" required>
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">Pincode <span class="text-danger">*</span></label>
                                <input type="text" class="cp-form-control" name="pincode"
                                    value="{{ $companyProfile->pincode ?? '' }}"
                                    placeholder="Enter pincode" required>
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">City <span class="text-danger">*</span></label>
                                <input type="text" class="cp-form-control" name="city"
                                    value="{{ $companyProfile->city ?? '' }}"
                                    placeholder="Enter city" required>
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">State <span class="text-danger">*</span></label>
                                <input type="text" class="cp-form-control" name="state"
                                    value="{{ $companyProfile->state ?? '' }}"
                                    placeholder="Enter state" required>
                            </div>

                            <div class="cp-form-group">
                                <label class="cp-label">Country <span class="text-danger">*</span></label>
                                <input type="text" class="cp-form-control" name="country"
                                    value="{{ $companyProfile->country ?? '' }}"
                                    placeholder="Enter country" required>
                            </div>

                        </div>
                    </div>

                    <div class="cp-actions" style="margin-top:8px">
                        <button type="submit" class="cp-btn cp-btn-success">
                            <i class="fas fa-{{ isset($companyProfile) ? 'save' : 'plus' }}"></i>
                            {{ isset($companyProfile) ? 'Update Profile' : 'Create Profile' }}
                        </button>
                        <a href="{{ route('companyProfile.show') }}" class="qc-btn-dismiss cp-btn cp-btn-danger">
                            <i class="fas fa-times"></i> Close
                        </a>
                    </div>

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

    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() { $('.select21').select2(); });

document.addEventListener('DOMContentLoaded', function() {
    let selectedLogoUrl = '';
    const logoInput     = document.getElementById('logoInput');
    const viewLogoBtn   = document.getElementById('viewLogoBtn');
    const cancelLogoBtn = document.getElementById('cancelLogoBtn');
    const uploadLabel   = document.querySelector('label[for="logoInput"]');
    const savedLogoUrl  = document.getElementById('savedLogoUrl');

    function syncButtons() {
        if (selectedLogoUrl || savedLogoUrl.value) {
            viewLogoBtn.classList.remove('d-none');
            cancelLogoBtn.classList.remove('d-none');
            uploadLabel.classList.add('d-none');
        } else {
            viewLogoBtn.classList.add('d-none');
            cancelLogoBtn.classList.add('d-none');
            uploadLabel.classList.remove('d-none');
        }
    }
    syncButtons();

    window.handleLogoSelection = function(input) {
        const file = input.files[0];
        if (file && file.type.startsWith('image/')) {
            selectedLogoUrl = URL.createObjectURL(file);
        } else { selectedLogoUrl = ''; }
        syncButtons();
    };

    window.viewLogo = function() {
        if (selectedLogoUrl) window.open(selectedLogoUrl, '_blank');
        else if (savedLogoUrl.value) window.open('{{ url('storage/') }}/' + savedLogoUrl.value, '_blank');
    };

    window.cancelLogoSelection = function() {
        logoInput.value = '';
        selectedLogoUrl = '';
        savedLogoUrl.value = '';
        syncButtons();
    };
});
</script>

@endsection