@extends('layout.master')
@section('content')
    <style>
        .mobile-preview {
            width: 375px;
            height: 667px;
            border: 1px solid #ccc;
            border-radius: 20px;
            overflow: hidden;
            background-color: #f8f8f8;
            position: relative;
            margin: auto;
        }

        .mobile-layout {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .app-header {
            background-color: #fff;
            padding: 15px;
            text-align: center;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .banner-container {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

        .banner-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .notice-section {
            text-align: center;
        }

        .notice-placeholder img {
            opacity: 0.5;
        }

        .profile-image {
            border-radius: 10px;
            object-fit: cover;
        }
    </style>
    @php
        $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];
        $menu = $_GET['menu'] ?? '';
    @endphp
    <div class="page-heading-block py-4">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
                <li class="breadcrumb-item"><a href="{{ route('settings.banners-notices') }}">Banners &amp; Notices</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Edit Banners/Notices</li>
            </ol>
        </nav>
    </div>
    <div class="page-main-content">
        <div class="add-estate-form-block p-5 rounded">
            <form action="{{ route('settings.banners-notices.update', ['id' => $banner_notice_detail->id]) }}"
                method="POST" class="row" id="add-banner-notice-form" enctype="multipart/form-data">
                {{ csrf_field() }}
                <input type="hidden" id="banner_notice_id" value="{{ $banner_notice_detail->id }}">
                <input type="hidden" id="attachment_name" value="{{ $banner_notice_detail->file_name ?? '' }}">
                <div class="mb-3 col-6">
                    <label for="estate-name" class="form-label">Title *</label>
                    <input type="text" class="form-control rounded {{ $errors->has('title') ? 'border-required' : '' }}"
                        name="title" id="estate-name"
                        value="{{ !empty(old('title')) ? old('title') : $banner_notice_detail->title }}">
                    @if ($errors->has('title'))
                        <p class="user_data text-danger my-2">{{ $errors->first('title') }}</p>
                    @endif
                </div>

                <div class="mb-3 col-6 {{ $userType != 1 ? 'hide' : '' }}">
                    <label for="unit-no" class="form-label">Estate</label>
                    <select name="estate_id" id="" class="form-control form-select estate-select rounded">
                        <option value="">-- Select Estate --</option>
                        @foreach ($estate_list ?? [] as $estate)
                            <option value="{{ $estate->value }}"
                                {{ !empty($banner_notice_detail->estate_id) && $banner_notice_detail->estate_id == $estate->value ? 'selected' : '' }}>
                                {{ $estate->label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3 col-3">
                    <label class="form-label">Type</label>
                    <div>
                        <input type="radio" class="form-check-inline m-0 type" name="type" id="banner"
                            value="1" {{ old('type', $banner_notice_detail->type) == 1 ? 'checked' : '' }}>
                        <label for="banner" class="m-1">Banner</label>
                        <input type="radio" class="form-check-inline m-0 type" name="type" id="notice"
                            value="2" {{ old('type', $banner_notice_detail->type) == 2 ? 'checked' : '' }}>
                        <label for="notice" class="m-1">Notice</label>
                    </div>
                    @if ($errors->has('type'))
                        <p class="user_data text-danger m-0 type-old-error">{{ $errors->first('type') }}</p>
                    @endif
                </div>
                {{-- <div class="mb-3 col-3">
                    <label class="form-label">status</label>
                    <div>
                        <input type="radio" class="form-check-inline m-0 status" name="status" id="active"
                            value="1" {{ old('status', $banner_notice_detail->status) == 1 ? 'checked' : '' }}>
                        <label for="banner" class="m-1">Active</label>
                        <input type="radio" class="form-check-inline m-0 status" name="status" id="inactive"
                            value="0" {{ old('status', $banner_notice_detail->status) == 0 ? 'checked' : '' }}>
                        <label for="notice" class="m-1">Inactive</label>
                    </div>
                    @if ($errors->has('status'))
                        <p class="user_data text-danger m-0 status-old-error">{{ $errors->first('status') }}</p>
                    @endif
                </div> --}}
                <div class="mb-3 col-12">
                    <label for="description" class="form-label">Description</label>
                    <textarea name="description" id="description" class="form-control rounded" cols="0" rows="2">{{ !empty(old('description')) ? old('description') : $banner_notice_detail->description ?? '' }}</textarea>
                </div>
                <div class="d-grid attachment-block">
                    <label class="form-label attachment-label-text">Attach (PNG, JPEG)</label>
                    <p id="attachment-error" class="text-danger m-0" style="display: none;">

                    </p>
                    @if ($errors->has('attachment'))
                        <p class="user_data text-danger m-0 attachment-old-error">{{ $errors->first('attachment') }}</p>
                    @endif
                    <input type="file" class="attachment-input" name="attachment" id="attachment"
                        accept="image/png, image/jpeg , application/pdf" />
                    <label for="attachment" class="attachment-label">
                        {{-- <div id="img-preview">
                            <img src="{{ asset('assets/images/add-attachment-icon.svg') }}" alt="">
                        </div> --}}

                        <div id="img-preview" class=" d-grid">
                            <img src="{{ !empty($banner_notice_detail->public_url) ? $banner_notice_detail->public_url : asset('assets/images/add-attachment-icon.svg') }}"
                                alt="" width="100" height="100">
                            <button type="button"
                                class="btn btn-danger btn-sm remove_image mt-1 {{ empty($banner_notice_detail->public_url) ? 'hide' : '' }}"
                                data-attachment_id="{{ $banner_notice_detail->attachment_id ?? '' }}">Remove</button>
                        </div>
                    </label>
                </div>
                <a href="javascript:void(0)" id="previewButton"
                    style="display: {{ empty($banner_notice_detail->public_url) ? "none" : "block" }};" data-bs-toggle="modal"
                    data-bs-target="#mobileBannerPreview">(Show preview)</a>
                <div class="d-flex justify-content-end ">
                    <a href="{{ route('settings.banners-notices') }}" class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn">Save</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="mobileBannerPreview" tabindex="-1" aria-labelledby="mobileBannerPreviewLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mobileBannerPreviewLabel">Mobile Preview</h5>
                </div>
                <div class="modal-body">
                    <div class="mobile-preview">
                        <!-- Mobile Mockup -->
                        <div class="mobile-layout p-3">
                            <header class="app-header rounded">
                                <img src="{{ asset('assets/images/mobile-logo.jpeg') }}" alt="logo" width="100"
                                    height="50">
                                <div class="d-flex">
                                    <div class="d-flex flex-column mx-2">
                                        <span>James Koh</span>
                                        <span>75#05-10</span>
                                    </div>
                                    <div>
                                        <img class="profile-image"
                                            src="{{ asset('assets/images/mobile-user-profile-placeholder.jpeg') }}"
                                            alt="user profile" width="50" height="50">
                                    </div>
                                </div>
                            </header>
                            <div class="banner-container">
                                <img id="bannerPreview"
                                    src="{{ !empty($banner_notice_detail->public_url) ? $banner_notice_detail->public_url : '' }}"
                                    alt="Banner Preview" />
                            </div>
                            <section class="notice-section my-1">
                                <h4 class="text-start">Notices</h4>
                                <div class="notice-placeholder">
                                    <img src="{{ asset('assets/images/notice-preview.jpeg') }}" alt="Notice Placeholder"
                                        width="300" height="300" />
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn form-cancel-btn" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

        <script src="{{ asset('js/edit-banner-notice-page.js') }}"></script>
    @endPush
@endsection