@extends('layouts.master')
@section('title')
    About Us
@endsection

@section('css')
    <script src="{{ asset('custom_js/upload-image.js') }}" defer></script>
    <script src="{{ asset('custom_js/upload-video.js') }}" defer></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            About
        @endslot
        @slot('title')
            Content
        @endslot
    @endcomponent

    <div class="card info-card pt-5 ps-3">
        <div class="card-body">
            <form action="{{ route('about.update', $about->id) }}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-6 mb-3">
                        <label for="video" class="form-label">Video</label>
                        <input type="file" class="form-control" name="video" id="video" accept="video/*" data-url="{{ route('about.update', ':id') }}" data-about-id="{{ $about->id }}" />
                        @error('video')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                        <div id="videoUploadProgress" class="progress mt-2" style="display: none;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" id="videoProgress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <video id="videoPreview" class="rounded" controls style="max-width: 100%; max-height: 300px; display: {{ $about->video ? 'block' : 'none' }};">
                            @if($about->video)
                                <source src="{{ !str_contains($about->video, 'https://') ? asset('uploads/about/' . $about->video) : $about->video }}" type="video/mp4">
                                Your browser does not support the video tag.
                            @endif
                        </video>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="video_title" class="form-label">Video Title</label>
                        <input type="text" class="form-control" name="video_title" value="{{ old('video_title', $about->video_title) }}" />
                        @error('video_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="video_subtitle" class="form-label">Video Sub Title</label>
                        <input type="text" class="form-control" name="video_subtitle" value="{{ old('video_subtitle', $about->video_subtitle) }}" />
                        @error('video_subtitle')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="video_website_name" class="form-label">Video Website Name</label>
                        <input type="text" class="form-control" name="video_website_name" value="{{ old('video_website_name', $about->video_website_name) }}" />
                        @error('video_website_name')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="video_slogan" class="form-label">Video Slogan</label>
                        <input type="text" class="form-control" name="video_slogan" value="{{ old('video_slogan', $about->video_slogan) }}" />
                        @error('video_slogan')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <hr>

                    <div class="col-6 mb-3">
                        <label for="content_title" class="form-label">Content Title</label>
                        <input type="text" class="form-control" name="content_title" value="{{ old('content_title', $about->content_title) }}" />
                        @error('content_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="content_description" class="form-label">Content Description</label>
                        <textarea class="form-control" rows="3" name="content_description">{{ old('content_description', $about->content_description) }}</textarea>
                        @error('content_description')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <hr>

                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ asset('uploads/about/' . $about->content2_image) }}" alt="image" class="d-block rounded" width="150" height="90" id="uploadedAvatar" />
                                <br>
                                <div class="form-group">
                                    <label for="upload" class="btn btn-primary me-2 mb-2" tabindex="0">
                                        <span class="d-none d-sm-block">Upload Image Here</span>
                                        <i class="bx bx-upload d-block d-sm-none"></i>
                                        <input class="form-control account-file-input" type="file" name="content2_image" id="upload" hidden>
                                    </label>
                                    <button type="button" class="btn btn-outline-secondary account-image-reset mb-2">
                                        <i class="bx bx-reset d-block d-sm-none"></i>
                                        <span class="d-none d-sm-block">Reset</span>
                                    </button>
                                </div>
                                <span class="text text-info" style="font-size: 11px">The image is preferred to be 764 x 404</span>
                                @error('content2_image')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="content2_title" class="form-label">Content 2 Title</label>
                        <input type="text" class="form-control" name="content2_title" value="{{ old('content2_title', $about->content2_title) }}" />
                        @error('content2_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="content2_description" class="form-label">Content 2 Description</label>
                        <textarea class="form-control" rows="3" name="content2_description">{{ old('content2_description', $about->content2_description) }}</textarea>
                        @error('content2_description')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <hr>

                    <div class="col-6 mb-3">
                        <label for="content3_title" class="form-label">Content 3 Title</label>
                        <input type="text" class="form-control" name="content3_title" value="{{ old('content3_title', $about->content3_title) }}" />
                        @error('content3_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-3">
                        <label for="content3_description" class="form-label">Content 3 Description</label>
                        <textarea class="form-control" rows="3" name="content3_description">{{ old('content3_description', $about->content3_description) }}</textarea>
                        @error('content3_description')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <hr>

                    <div class="col-6 mb-3">
                        <label for="content4_title" class="form-label">Content 4 Title</label>
                        <input type="text" class="form-control" name="content4_title" value="{{ old('content4_title', $about->content4_title) }}" />
                        @error('content4_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-6 mb-4">
                        <label for="content4_description" class="form-label">Content 4 Description</label>
                        <textarea class="form-control" rows="4" name="content4_description">{{ old('content4_description', $about->content4_description) }}</textarea>
                        @error('content4_description')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <hr>

                    <div class="col-6 mb-3">
                        <label for="publications_title" class="form-label">Publications Title</label>
                        <input type="text" class="form-control" name="publications_title" value="{{ old('publications_title', $about->publications_title) }}" />
                        @error('publications_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <hr>
                <button type="submit" class="btn btn-round btn-success col-md-1 me-2">Save</button>
            </form>
        </div>
    </div>
@endsection