@extends('backend.dashboard.layout.master')
@section('content')

<div class="container-xxl">
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title mb-0">
            @if (isset($method) && $method == 'PUT')
            {{ translate('Edit Company') }}
            @else
            {{ translate('Create Company') }}
            @endif
            </h3>
            <!-- Add Customer Button (Blue, with icon, triggers modal) -->
            @if (!isset($method))
                <button type="button" class="btn btn-primary d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
            <i class="bi bi-person-plus-fill me-2"></i>
            {{ translate('Add Customer') }}
            </button>
            @endif
        </div>

      @if(!isset($method))
        <!-- Add Customer Modal -->
        <form action="{{ route('userCompanyStore.post') }}" method="POST" id="addCustomerForm">
            @csrf
            @method('POST')
            <div class="modal fade" id="addCustomerModal" tabindex="-1" aria-labelledby="addCustomerModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('Customer.store') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="addCustomerModalLabel">{{ translate('Add Customer') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ translate('Close') }}"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-4">
                    <h4 class="mb-3">{{ translate('Customer Information') }}</h4>
                    <div class="row g-3">
                        <!-- Customer Name -->
                        <div class="col-md-4 required">
                        <label class="form-label required">{{ translate('Customer name') }}</label>
                        <input type="text" name="name" class="form-control" value="{{ old('name', isset($User) ? $User->name : '') }}" required>
                        </div>
                        <!-- Customer Email -->
                        <div class="col-md-4">
                        <label class="form-label required">{{ translate('Customer email') }}</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email', isset($User) ? $User->email : '') }}" required>
                        </div>
                        <!-- Customer Password -->
                        <div class="col-md-4">
                        <label class="form-label required">{{ translate('Customer password') }}</label>
                        <input type="password" class="form-control" name="password" value="{{ old('password') }}" required>
                        <div class="invalid-feedback">{{ translate('Please provide a valid password.') }}</div>
                        </div>
                        <!-- Phone Number -->
                        <div class="col-md-4">
                        <label class="form-label required">{{ translate('Phone number') }}</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', isset($User) ? $User->phone : '') }}" required>
                        <div class="invalid-feedback">{{ translate('Please provide a valid phone number.') }}</div>
                        </div>
                        <!-- Language -->
                        <div class="col-md-4">
                        <label class="form-label required">{{ translate('Language') }}</label>
                        <select name="lang" class="form-select">
                            @foreach ($language as $item)
                               <option value="{{ $item->name }}"
                                   @if (
                                       old('lang', isset($User) ? $User->lang : null)
                                     ? old('lang', isset($User) ? $User->lang : null) == $item->name
                                     : app()->getLocale() == $item->name
                                   )
                                       selected
                                   @endif
                               >{{ $item->name }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">{{ translate('Please select a valid Language.') }}</div>
                        </div>
                        <!-- Customer Address -->
                        <div class="col-md-4">
                        <label class="form-label required">{{ translate('Address') }}</label>
                        <input type="text" class="form-control" name="address" value="{{ old('address', isset($Customer) ? $Customer->address : '') }}" required>
                        <div class="invalid-feedback">{{ translate('Please enter a valid address.') }}</div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">{{ translate('Save Customer') }}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translate('Close') }}</button>
                </div>
                </form>
            </div>
            </div>
        </div>
        </form>
        <!-- End Add Customer Modal -->
      @endif

        <div class="card-body">
            <form class="needs-validation" id="myForm" action="{{ $action }}" method="POST" enctype="multipart/form-data" novalidate>
                @csrf
                @if (isset($method))
                    @method('PUT')
                @endif

                <div class="mb-4">
                    <h4 class="mb-3">{{ translate('Company Information') }}</h4>
                    <div class="row g-3">

                         <!-- Customer name -->
                        <div class="col-md-4">
                            <label class="form-label required">{{ translate('Customer name') }}</label>
                            <select name="customer_id" class="form-select" required>
                                <option value="">{{ translate('Select Customer') }}</option>
                                @foreach($Customer::get() as $item)
                                    <option value="{{ $item->id }}" @if (old('customer_id', $Company->customer_id ?? null) == $item->id) selected @endif>
                                        {{ $item->user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Company Name -->
                        <div class="col-md-4">
                            <label class="form-label required">{{ translate('Company Name') }}</label>
                            <input type="text" class="form-control" name="name" value="{{ old('name', $Company->name) }}" required>
                        </div>

                        <!-- Company Email -->
                        <div class="col-md-4">
                            <label class="form-label required">{{ translate('Company Email') }}</label>
                            <input type="email" class="form-control" name="email" value="{{ old('email', $Company->email) }}" required>
                        </div>

                        <!-- Company Phone -->
                        <div class="col-md-4">
                            <label class="form-label required">{{ translate('Company Phone') }}</label>
                            <input type="text" class="form-control" name="phone" value="{{ old('phone', $Company->phone) }}" required>
                        </div>

                        <!-- Tax Number -->
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Tax Number') }}</label>
                            <input type="text" class="form-control" name="tax_number" value="{{ old('tax_number', $Company->tax_number) }}" required>
                        </div>

                        <!-- Company Address -->
                        <div class="col-md-4">
                            <label class="form-label required">{{ translate('Address') }}</label>
                            <input type="text" class="form-control" name="address" value="{{ old('address', $Company->address) }}" required>
                        </div>

                        <!-- Description -->
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Description') }}</label>
                            <input type="text" class="form-control" name="description" value="{{ old('description', $Company->description) }}" required>
                        </div>

                        <!-- Logo Upload with Metronic Image Picker -->
                        <br>


                            <div id="imagePreviewContainer" style="display: none;" class="mt-2">
                                <img id="imagePreview" src="#" alt="Selected Image" class="img-thumbnail" width="80" height="80">
                            </div>
                        </div>
                    </div>
                     <div class="col-md-4">
                         <div class="col-md-4">
                            <div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url('{{ asset('assets/media/avatars/blank.png') }}')">
                                <!-- Current image -->
                                <div class="image-input-wrapper w-80px h-80px" style="background-image: url('{{ isset($Company->logo) && $Company->logo ? asset($Company->logo) : asset('assets/media/avatars/blank.png') }}')"></div>
                                <!-- Hidden file input -->
                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="{{ translate('Change logo') }}">
                                    <i class="bi bi-pencil-fill fs-7"></i>
                                    <input type="file" name="logo" accept=".png, .jpg, .jpeg" />
                                    <input type="hidden" name="logo_remove" />
                                </label>
                                <!-- Cancel button -->
                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="{{ translate('Cancel logo') }}">
                                    <i class="bi bi-x fs-2"></i>
                                </span>
                                <!-- Remove button -->
                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="{{ translate('Remove logo') }}">
                                    <i class="bi bi-x fs-2"></i>
                                </span>
                            </div>
                            <div class="form-text">{{ translate('Allowed file types: png, jpg, jpeg.') }}</div>
                        </div>
                       </div>
        </div>


                <!-- Submit and Back Buttons -->
                <div class="d-flex mb-12 mt- me-12 justify-content-end mt-4 gap-2">
                    <button class="btn btn-primary" type="submit">{{ translate('Submit Form') }}</button>
                    <a href="{{ route('Customer.index') }}" class="btn btn-secondary">{{ translate('Back') }}</a>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- JS for image preview --}}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const input = document.getElementById('imageInput');
        const preview = document.getElementById('imagePreview');
        const container = document.getElementById('imagePreviewContainer');

        input.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                preview.src = URL.createObjectURL(file);
                container.style.display = 'block';
            }
        });
    });
</script>
@endsection