@extends('layouts.backoffice.index', ['title' => 'Tentang Kami'])

@section('main')
    <section class="section">
        <div class="card shadow">
            <div class="card-header">
                <h5><b>Tentang Kami {{ session('warning') }}</b></h5>
            </div>
            <div class="card-body">
                <form action="{{ route('backoffice.about-us.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label><b> Nama Perusahaan </b> <span class="text-danger"><b>*</b></span></label>
                            <input type="text" class="form-control" name="company_name"
                                value="{{ old('company_name', $profile->company_name ?? '') }}" required>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label><b> Deskripsi Perusahaan </b> <span class="text-danger"><b>*</b></span></label>
                            <textarea id="description" name="description" class="form-control" rows="8">{{ old('description', $profile->description ?? '') }}</textarea>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label><b> Deskripsi Singkat </b> <span class="text-danger"><b>*</b></span></label>
                            <textarea id="short-description" name="short_description" class="form-control" rows="3">{{ old('short_description', $profile->short_description ?? '') }}</textarea>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label><b> Visi </b> <span class="text-danger"><b>*</b></span></label>
                            <textarea id="vision" name="vision" class="form-control" rows="6">{{ old('vision', $profile->vision ?? '') }}</textarea>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label><b> Misi </b> <span class="text-danger"><b>*</b></span></label>
                            <textarea id="mision" name="mission" class="form-control" rows="6">{{ old('mission', $profile->mission ?? '') }}</textarea>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for=""><b> Alamat </b> <span class="text-danger"><b>*</b></span></label>
                            <textarea name="address" id="" cols="" rows="4" class="form-control">{{ old('address', $profile->address ?? '') }}</textarea>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for=""><b> Email </b> <span class="text-danger"><b>*</b></span></label>
                            <input type="email" name="email" class="form-control" placeholder="example@gmail.com"
                                value="{{ old('email', $profile->email ?? '') }}" required>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for=""><b> No Telepon </b> <span class="text-danger"><b>*</b></span></label>
                            <input type="text" name="phone" class="form-control" placeholder="082313273XXX"
                                value="{{ old('phone', $profile->phone ?? '') }}" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="form-group">
                                <label><b> Foto Kantor </b> <span class="text-danger"><b>*</b></span></label>
                                @if (!empty($profile->office_photo))
                                    <div class="mb-2"><img src="{{ asset('storage/' . $profile->office_photo) }}"
                                            style="max-width:180px;border-radius:8px;" /></div>
                                @endif
                                <div class="upload-area">
                                    <input type="file" id="office-photo" name="office_photo_file" class="upload-input"
                                        accept="image/*" {{ !empty($profile->office_photo) ? '' : 'required' }}>
                                    <div class="upload-message">
                                        <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                                        <p class="mt-2 mb-0">Klik atau tarik foto ke sini</p>
                                        <small class="text-muted">Format: jpg, png, jpeg</small>
                                    </div>
                                </div>
                                <small>Ukuran yang direkomendasikan 1920 x 1080 px atau gambar dengan format
                                    landscape</small>
                                <div id="preview-office-photo" class="mt-3 text-center"></div>
                            </div>
                            <div class="form-group">
                                <label><b> Peta Distribusi </b> <span class="text-danger"><b>*</b></span></label>
                                @if (!empty($profile->distribution_photo))
                                    <div class="mb-2"><img src="{{ asset('storage/' . $profile->distribution_photo) }}"
                                            style="max-width:180px;border-radius:8px;" /></div>
                                @endif
                                <div class="upload-area">
                                    <input type="file" id="distribution-photo" name="distribution_photo_file"
                                        class="upload-input" accept="image/*"
                                        {{ !empty($profile->distribution_photo) ? '' : 'required' }}>
                                    <div class="upload-message">
                                        <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                                        <p class="mt-2 mb-0">Klik atau tarik foto ke sini</p>
                                        <small class="text-muted">Format: jpg, png, jpeg</small>
                                    </div>
                                </div>
                                <small>Ukuran yang direkomendasikan 1920 x 1080 px atau gambar dengan format
                                    landscape</small>
                                <div id="preview-distribution-photo" class="mt-3 text-center"></div>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="form-group">
                                <label><b> Jam Operasional </b> </label>
                                <div id="operational-hours-wrapper">
                                    @php $oh = old('operational_hours', $operational_hours ?? []); @endphp
                                    @if (count($oh) > 0)
                                        @foreach ($oh as $idx => $row)
                                            <div class="row mb-2 operational-hours-item">
                                                <div class="col-5">
                                                    <input type="text" class="form-control"
                                                        name="operational_hours[{{ $idx }}][day]" required
                                                        placeholder="Hari" value="{{ $row['day'] ?? '' }}">
                                                </div>
                                                <div class="col-5">
                                                    <input type="text" class="form-control"
                                                        name="operational_hours[{{ $idx }}][time]" required
                                                        placeholder="Contoh: 08:00 - 17:00"
                                                        value="{{ $row['time'] ?? '' }}">
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-danger btn-remove-clock"
                                                        type="button">X</button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="row mb-2 operational-hours-item">
                                            <div class="col-5">
                                                <input type="text" class="form-control"
                                                    name="operational_hours[0][day]" required placeholder="Hari">
                                            </div>
                                            <div class="col-5">
                                                <input type="text" class="form-control"
                                                    name="operational_hours[0][time]" required
                                                    placeholder="Contoh: 08:00 - 17:00">
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-danger btn-remove-clock" type="button">X</button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <button class="btn btn-primary mt-2" id="add-clock-btn" type="button">+ Tambah
                                    Jam</button>
                            </div>
                            <div class="form-group">
                                <label><b> Sosial Media </b> </label>
                                <div id="sosmed-wrapper">
                                    @php $slist = old('socials', $socials ?? []); @endphp
                                    @if (count($slist) > 0)
                                        @foreach ($slist as $i => $s)
                                            <div class="row mb-2 sosmed-item">
                                                <div class="col-5">
                                                    <select name="socials[{{ $i }}][type]"
                                                        class="form-control social-selector">
                                                        <option value="Instagram"
                                                            {{ isset($s['type']) && $s['type'] == 'Instagram' ? 'selected' : '' }}>
                                                            Instagram</option>
                                                        <option value="Whatsapp"
                                                            {{ isset($s['type']) && $s['type'] == 'Whatsapp' ? 'selected' : '' }}>
                                                            Whatsapp</option>
                                                        <option value="Facebook"
                                                            {{ isset($s['type']) && $s['type'] == 'Facebook' ? 'selected' : '' }}>
                                                            Facebook</option>
                                                        <option value="Email"
                                                            {{ isset($s['type']) && $s['type'] == 'Email' ? 'selected' : '' }}>
                                                            Email</option>
                                                        <option value="Tiktok"
                                                            {{ isset($s['type']) && $s['type'] == 'Tiktok' ? 'selected' : '' }}>
                                                            Tiktok</option>
                                                    </select>
                                                </div>
                                                <div class="col-5">
                                                    <input type="text" class="form-control"
                                                        name="socials[{{ $i }}][url]" placeholder="link"
                                                        required value="{{ $s['url'] ?? '' }}">
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-danger btn-remove-sosmed"
                                                        type="button">X</button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="row mb-2 sosmed-item">
                                            <div class="col-5">
                                                <select name="socials[0][type]" class="form-control social-selector">
                                                    <option value="Instagram">Instagram</option>
                                                    <option value="Whatsapp">Whatsapp</option>
                                                    <option value="Facebook">Facebook</option>
                                                    <option value="Email">Email</option>
                                                    <option value="Tiktok">Tiktok</option>
                                                </select>
                                            </div>
                                            <div class="col-5">
                                                <input type="text" class="form-control" name="socials[0][url]"
                                                    placeholder="link" required>
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-danger btn-remove-sosmed" type="button">X</button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <button class="btn btn-primary mt-2" id="add-sosmed-btn" type="button">+ Tambah Sosial
                                    Media</button>
                            </div>
                            <div class="form-group">
                                <label><b> Legalitas </b> </label>
                                <div id="legality-wrapper">
                                    @php $l = old('legality',$legality  ?? []); @endphp
                                    @if (count($legality) > 0)
                                        @foreach ($legality as $j => $doc)
                                            <div class="row mb-2 legality-item">
                                                <div class="col-5">
                                                    <input type="text" class="form-control"
                                                        name="legality[{{ $j }}][name]"
                                                        placeholder="Nama Dokumen" required
                                                        value="{{ $doc['name'] ?? '' }}">
                                                </div>
                                                <div class="col-5">
                                                    <input type="text" class="form-control"
                                                        name="legality[{{ $j }}][number]"
                                                        placeholder="Nomor Dokumen" required
                                                        value="{{ $doc['number'] ?? '' }}">
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-danger btn-remove-legality"
                                                        type="button">X</button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="row mb-2 legality-item">
                                            <div class="col-5">
                                                <input type="text" class="form-control" name="legality[0][name]"
                                                    placeholder="Nama Dokumen" required>
                                            </div>
                                            <div class="col-5">
                                                <input type="text" class="form-control" name="legality[0][number]"
                                                    placeholder="Nomor Dokumen" required>
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-danger btn-remove-legality"
                                                    type="button">X</button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <button class="btn btn-primary mt-2" id="add-legality-btn" type="button">+ Tambah
                                    Legalitas</button>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <hr>
                        </div>

                        <div class="col-md-6 text-left">
                            <span><b> Catatan : </b></span>
                            <p>Masukan dengan tanda bintang merah ( <span class="text-danger">*</span> ) wajib diisi /
                                dipilih</p>
                        </div>
                        <div class="col-md-6 text-right">
                            <button type="submit" class="btn btn-success">
                                <i class="fa fa-save"></i> Simpan Perubahan
                            </button>
                            {{-- <a href="{{ route('backoffice.about-us') }}" class="btn btn-danger">
                                <i class="fa fa-times"></i> Buang Perubahan
                            </a> --}}
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />


    <style>
        /* Styling Custom Input File agar terlihat seperti Dropzone */
        .upload-area {
            position: relative;
            width: 100%;
            min-height: 150px;
            border: 2px dashed #6777ef;
            /* Warna primary theme */
            border-radius: 10px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.3s ease;
            overflow: hidden;
            cursor: pointer;
        }

        .upload-area:hover {
            background-color: #eef0ff;
            border-color: #4c59d6;
        }

        /* Sembunyikan input file asli tapi buat memenuhi area agar bisa diklik */
        .upload-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        .upload-message {
            z-index: 1;
            pointer-events: none;
            /* Agar klik tembus ke input */
        }

        /* Styling Preview Image */
        .preview-single img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .preview-gallery-item {
            position: relative;
            margin-bottom: 15px;
        }

        .preview-gallery-item img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ddd;
        }


        .fade-in {
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>

    {{-- CKEDITOR --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/41.2.0/classic/ckeditor.js"></script>
    <script>
        function handleFileSelect(event, previewId, isMultiple = false) {
            const files = event.target.files;
            const previewContainer = document.getElementById(previewId);

            previewContainer.innerHTML = '';

            if (files.length === 0) return;

            if (isMultiple) {
                Array.from(files).forEach(file => {
                    if (file.type.match('image.*')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const colDiv = document.createElement('div');
                            colDiv.className = 'col-4 preview-gallery-item fade-in';
                            colDiv.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
                            previewContainer.appendChild(colDiv);
                        }
                        reader.readAsDataURL(file);
                    }
                });
            } else {
                const file = files[0];
                if (file.type.match('image.*')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const div = document.createElement('div');
                        div.className = 'preview-single fade-in';
                        div.innerHTML = `<img src="${e.target.result}" alt="Preview Thumbnail">`;
                        previewContainer.appendChild(div);
                    }
                    reader.readAsDataURL(file);
                }
            }
        }


        document.getElementById('office-photo').addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-office-photo', false);
        });

        document.getElementById('distribution-photo').addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-distribution-photo', false);
        });
    </script>
    <script>
        class MyUploadAdapter {
            constructor(loader) {
                this.loader = loader;
            }

            upload() {
                return this.loader.file.then(file => {
                    return new Promise((resolve, reject) => {
                        const data = new FormData();
                        data.append('upload', file);

                        fetch("{{ route('backoffice.ckeditor.upload-for-company-description') }}", {
                                method: 'POST',
                                body: data,
                                headers: {
                                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                }
                            })
                            .then(response => response.json())
                            .then(result => {
                                if (!result.url) {
                                    reject(result);
                                }

                                resolve({
                                    default: result.url
                                });
                            })
                            .catch(error => reject(error));
                    });
                });
            }

            abort() {}
        }

        function MyCustomUploadAdapterPlugin(editor) {
            editor.plugins.get('FileRepository').createUploadAdapter = loader => {
                return new MyUploadAdapter(loader);
            };
        }
    </script>
    <script>
        // ========================================
        // SELECT2
        // ========================================
        $(document).ready(function() {
            $('.social-selector').select2({});
        });

        // ============================
        // CKEDITOR
        // ============================
        ClassicEditor
            .create(document.querySelector('#description'), {
                extraPlugins: [MyCustomUploadAdapterPlugin],
            })
            .then(editor => {
                editor.editing.view.change(writer => {
                    writer.setStyle('min-height', '100px', editor.editing.view.document.getRoot());
                });
            })
            .catch(error => console.error(error));
        ClassicEditor
            .create(document.querySelector('#short-description'))
            .then(editor => {
                editor.editing.view.change(writer => {
                    writer.setStyle('min-height', '100px', editor.editing.view.document.getRoot());
                });
            })
            .catch(error => console.error(error));
        ClassicEditor
            .create(document.querySelector('#vision'))
            .then(editor => {
                editor.editing.view.change(writer => {
                    writer.setStyle('min-height', '400px', editor.editing.view.document.getRoot());
                });
            })
            .catch(error => console.error(error));
        ClassicEditor
            .create(document.querySelector('#mision'))
            .then(editor => {
                editor.editing.view.change(writer => {
                    writer.setStyle('min-height', '400px', editor.editing.view.document.getRoot());
                });
            })
            .catch(error => console.error(error));

        // ============================
        // JAM OPERASIONAL DINAMIS
        // ============================
        document.getElementById('add-clock-btn').addEventListener('click', function() {
            const wrapper = document.getElementById('operational-hours-wrapper');
            const index = wrapper.querySelectorAll('.operational-hours-item').length;
            const newRow = `
            <div class="row mb-2 operational-hours-item">
                <div class="col-5">
                    <input type="text" class="form-control" name="operational_hours[${index}][day]" placeholder="Hari" required>
                </div>
                <div class="col-5">
                    <input type="text" class="form-control" name="operational_hours[${index}][time]" placeholder="Contoh: 08:00 - 17:00" required>
                </div>
                <div class="col-2">
                    <button class="btn btn-danger btn-remove-clock" type="button">X</button>
                </div>
            </div>
        `;
            wrapper.insertAdjacentHTML('beforeend', newRow);
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('btn-remove-clock')) {
                e.target.closest('.operational-hours-item').remove();
            }
        });

        // ============================
        // SOSMED DINAMIS
        // ============================
        document.getElementById('add-sosmed-btn').addEventListener('click', function() {
            const wrapper = document.getElementById('sosmed-wrapper');

            const index = wrapper.querySelectorAll('.sosmed-item').length;

            const newRow = `
        <div class="row mb-2 sosmed-item">
            <div class="col-5">
                <select name="socials[${index}][type]" class="form-control social-selector">
                    <option value="Instagram">Instagram</option>
                    <option value="Whatsapp">Whatsapp</option>
                    <option value="Facebook">Facebook</option>
                    <option value="Email">Email</option>
                    <option value="Tiktok">Tiktok</option>
                </select>
            </div>
            <div class="col-5">
                <input type="text" class="form-control" name="socials[${index}][url]" placeholder="link" required>
            </div>
            <div class="col-2">
                <button class="btn btn-danger btn-remove-sosmed" type="button">X</button>
            </div>
        </div>
    `;
            wrapper.insertAdjacentHTML('beforeend', newRow);
            $('.social-selector').select2({});
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('btn-remove-sosmed')) {
                e.target.closest('.sosmed-item').remove();
            }
        });


        // ============================
        // LEGALITAS DINAMIS
        // ============================
        document.getElementById('add-legality-btn').addEventListener('click', function() {
            const wrapper = document.getElementById('legality-wrapper');
            const index = wrapper.querySelectorAll('.legality-item').length;
            console.log(index);
            const newRow = `
            <div id="legality-wrapper">
                <div class="row mb-2 legality-item">
                    <div class="col-5">
                        <input type="text" class="form-control" name="legality[${index}][name]" placeholder="Nama Dokumen" required>
                    </div>
                    <div class="col-5">
                        <input type="text" class="form-control" name="legality[${index}][number]" placeholder="Nomor Dokumen" required>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-danger btn-remove-legality" type="button">X</button>
                    </div>
                </div>
            </div>
        `;
            wrapper.insertAdjacentHTML('beforeend', newRow);
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('btn-remove-legality')) {
                e.target.closest('.legality-item').remove();
            }
        });
    </script>
@endpush