@extends('layouts/layoutMaster')

@section('title', 'eCommerce Product Add - Apps')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/quill/typography.scss',
'resources/assets/vendor/libs/quill/katex.scss',
'resources/assets/vendor/libs/quill/editor.scss',
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/dropzone/dropzone.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/tagify/tagify.scss',
'resources/assets/vendor/libs/bs-stepper/bs-stepper.scss'
])
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/tagify/tagify.js',
'resources/assets/vendor/libs/dropzone/dropzone.js',
'resources/assets/vendor/libs/jquery-repeater/jquery-repeater.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js'
])
@endsection

@section('page-script')
@vite([
'resources/assets/js/hybrid-package-add.js'
])
@endsection

@section('content')
<div class="app-ecommerce">

    <!-- Add Product -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">

        <div class="d-flex flex-column justify-content-center">
            <h4 class="mb-1">Add Hybrid Package</h4>
            <p class="mb-0">Fill in the details below to add a new transfer</p>
        </div>
    </div>


    <div class="row">
        <!-- First column-->
        <div class="col-12 col-lg-12">
            @include('content.hybrid.package.alerts')
            @include('content.hybrid.package.stepper', ['currentStep' => 2,'packageId'=>$package->id])

            <form action="{{ route('hybrid-package-media-store',$package->id) }}" method="POST" class="needs-validation" novalidate enctype="multipart/form-data">
                @csrf
                <input type="hidden" value="{{$package->id}}" name="package_id">
                <div class="card mb-6">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Media</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-repeater">
                            <div data-repeater-list="images">                                
                                @if(isset($media) && count($media) > 0)
                                @foreach($media as $image)
                                @if($image->type == 'IMAGE')
                                <div data-repeater-item>
                                    <div class="row">
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="image-title">Image Title</label>
                                            <input type="text" id="image-title" name="image_title" value="{{$image->title}}" class="form-control">
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="image-category">Image Category</label>
                                            <select id="image-category" name="image_category" class="form-select" placeholder="Select Category">
                                                <option value="">Select Category</option>
                                                <option value="Thumbnail" {{$image->category == 'Thumbnail' ? 'selected':''}}>Thumbnail</option>
                                                <option value="Images" {{$image->category == 'Images' ? 'selected':''}}>Images</option>
                                            </select>
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="image-city">Image City</label>
                                            <select id="image-city" name="image_city" class="form-select">
                                                @foreach($cities as $city)
                                                <option value="{{$city['id']}}" {{$city['id'] == $image->city ? 'selected':''}}>{{$city['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="mb-6 col-10">
                                            <label class="form-label">Add Images</label>
                                            <input type="file" name="image" class="form-control" multiple accept=".jpg,.jpeg,.png">
                                            <small>Upload jpeg/png with max file size up to 500kb. Height 200px and Width 800px.</small>
                                            <div class="row mt-3" style="margin-left: 5px;">
                                                <div class="col-1 rounded-2 bg-label-secondary">
                                                    <div class="avatar">
                                                        <img src="{{ asset('storage/' . $image->url) }}" alt="{{$image->title}}" class="rounded-2">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-6 col-2 mt-5">
                                            <button type="button" class="btn btn-danger" data-repeater-delete>Remove</button>
                                        </div>
                                    </div>
                                    <hr class="mt-0">
                                </div>
                                @endif
                                @endforeach
                                @else
                                <div data-repeater-item>
                                    <div class="row">
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="image-title">Image Title</label>
                                            <input type="text" id="image-title" name="image_title" class="form-control">
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="image-category">Image Category</label>
                                            <select id="image-category" name="image_category" class="form-select" placeholder="Select Category">
                                                <option value="">Select Category</option>
                                                <option value="Thumbnail">Thumbnail</option>
                                                <option value="Images">Images</option>
                                            </select>
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="image-city">Image City</label>
                                            <select id="image-city" name="image_city" class="form-select">
                                                @foreach($cities as $city)
                                                <option value="{{$city['id']}}">{{$city['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="mb-6 col-10">
                                            <label class="form-label">Add Images</label>
                                            <input type="file" name="image" class="form-control" multiple accept=".jpg,.jpeg,.png">
                                            <small>Upload jpeg/png with max file size up to 500kb. Height 200px and Width 800px.</small>
                                        </div>
                                        <div class="mb-6 col-2 mt-5">
                                            <button type="button" class="btn btn-danger" data-repeater-delete>Remove</button>
                                        </div>
                                    </div>
                                    <hr class="mt-0">
                                </div>
                                @endif
                            </div>
                            <button type="button" class="btn btn-primary" data-repeater-create><i class='ti ti-plus ti-xs me-2'></i> Add More</button>
                        </div>
                    </div>
                </div>
                <div class="card mb-6">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Add Video</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="mb-6 col-6">
                                <label class="form-label" for="video-title">Video Title</label>
                                <input type="text" id="video-title" name="video_title" value="{{isset($videos[0]->title)?$videos[0]->title:''}}" class="form-control">
                            </div>
                            <div class="mb-6 col-6">
                                <label class="form-label" for="video-link">Add Video Link (YouTube)</label>
                                <input type="url" id="video-link" name="video_link" value="{{isset($videos[0]->url)?$videos[0]->url:''}}" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-6">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Add Info Box</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-repeater">
                            <div data-repeater-list="infobox">
                                
                                    @if(isset($addons) && count($addons) > 0)
                                    @foreach($addons as $addon)
                                    <div data-repeater-item>
                                    <div class="row">
                                        <input type="hidden" id="info-id" name="info_id" value="{{$addon->id}}" class="form-control">
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="info-title">Info Box Title</label>
                                            <input type="text" id="info-title" name="info_title" value="{{$addon->title}}" class="form-control">
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="info-description">Info Box Description</label>
                                            <textarea id="info-description" name="info_description" class="form-control">{{$addon->description}}</textarea>
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="info-sequence">Sequence</label>
                                            <input type="number" id="info-sequence" name="info_sequence" value="{{$addon->sequence}}" class="form-control">
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="info-validity">Validity</label>
                                            <input type="text" name="info_validity" class="form-control flatpickr-range" value="{{$addon->validity}}" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" />
                                        </div>
                                        <div class="mb-6 col-6">
                                            <label class="form-label">Icon/Image</label>
                                            <input type="file" name="info_icon" class="form-control" accept=".jpg,.jpeg,.png">
                                            <small>Upload jpeg/png with max file size up to 500kb. Height 200px and Width 800px.</small>
                                        <div class="row mt-3" style="margin-left: 5px;">
                                                <div class="col-1 rounded-2 bg-label-secondary">
                                                    <div class="avatar">
                                                        <img src="{{ asset('storage/' . $addon->image_url) }}" alt="{{$addon->title}}" class="rounded-2">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-6 col-2 mt-5">
                                            <button type="button" class="btn btn-danger" data-repeater-delete>Remove</button>
                                        </div>
                                    </div>
                                        
                                    <hr class="mt-0">
                                    </div>
                                    @endforeach
                                    @else
                                    <div data-repeater-item>
                                    <div class="row">
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="info-title">Info Box Title</label>
                                            <input type="text" id="info-title" name="info_title" class="form-control">
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="info-description">Info Box Description</label>
                                            <textarea id="info-description" name="info_description" class="form-control"></textarea>
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="info-sequence">Sequence</label>
                                            <input type="number" id="info-sequence" name="info_sequence" class="form-control">
                                        </div>
                                        <div class="mb-6 col-4">
                                            <label class="form-label" for="info-validity">Validity</label>
                                            <input type="text" name="info_validity" class="form-control flatpickr-range" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" />
                                        </div>
                                        <div class="mb-6 col-6">
                                            <label class="form-label">Icon/Image</label>
                                            <input type="file" name="info_icon" class="form-control">
                                            <small>Upload jpeg/png with max file size up to 500kb. Height 200px and Width 800px.</small>
                                        </div>
                                        <div class="mb-6 col-2 mt-5">
                                            <button type="button" class="btn btn-danger" data-repeater-delete>Remove</button>
                                        </div>
                                    </div>
                                        
                                    <hr class="mt-0">
                                    </div>
                                    @endif

                                
                            </div>
                            <button type="button" class="btn btn-primary" data-repeater-create><i class='ti ti-plus ti-xs me-2'></i> Add More</button>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
                    <div class="d-flex flex-column justify-content-center"></div>
                    <div class="d-flex align-content-center flex-wrap gap-4">      
                        <button type="submit" class="btn btn-primary waves-effect waves-light">Submit Media</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection