@extends('admin.layouts.master')
@section('content')
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="card bg-body-white hoverable card-xl-stretch mb-xl-8">	
	<div class="card card-custom">
        <div class="card-header">
            <h3 class="card-title">
                Banner Details
            </h3>
            <div class="card-toolbar">
                <div class="example-tools justify-content-center">
                    <span class="example-toggle" data-toggle="tooltip" title="View code"></span>
                    <span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
                </div>
            </div>
        </div>
	    <!--begin::Form-->
        <form action="{{ isset($banner) ? route('admin.banners.update', $banner->id) : route('admin.banners.store') }}" method="POST" enctype="multipart/form-data" class="form">
            @csrf
            @if(isset($banner))
                @method('PUT')
            @endif

             <input type="hidden" name="country_id" class="putCountryId">
            <div class="card-body">
                <div class="form-group">
                    <label>Heading</label>
                    <input type="text" name="heading" value="{{ old('heading', $banner->heading ?? '') }}"
                        class="form-control form-control-solid" placeholder="" required>
                </div>                
                <div class="form-group">
                    <label>Sub Heading</label>
                    <textarea name="sub_heading" class="form-control form-control-solid" required>{{ old('sub_heading', $banner->sub_heading ?? '') }}</textarea>
                </div>
                <div class="form-group">
                    <label>Content</label>
                    <textarea name="content" class="form-control form-control-solid" rows="5" required>{{ old('content', $banner->content ?? '') }}</textarea>
                </div>
                <div class="form-group">
                    <label>Image</label>                    
                    @if(!empty($banner->bg_image))
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $banner->bg_image) }}" width="100">
                        </div>
                    @endif
                    <input type="file" name="bg_image" accept="image/*" class="form-control form-control-solid">
                </div>

                <label>Button</label><a href="javascript:void(0);" id="add-button-section"><i class="bi bi-plus fw-bolder fa-2x"></i></a>                
                <div class="row m-0 mb-10 p-5 border rounded-3" id="button-section-wrapper">
                    @if(!empty($banner->buttons))
                        @foreach(json_decode($banner->buttons, true) as $btn)
                            <div class="row m-0 mb-5 p-5 border rounded-3 button-row">
                                <div class="form-group col p-0 m-0">
                                    <input type="text" name="button_text[]" value="{{ $btn['text'] }}" class="form-control form-control-solid" placeholder="Button Text">
                                </div>
                                <div class="align-items-center col d-flex form-group m-0 mx-2 p-0">
                                    <input type="text" name="button_link[]" value="{{ $btn['link'] }}" class="form-control form-control-solid me-2" placeholder="Button Link">
                                    <a href="javascript:void(0);" class="remove-button-section text-danger">
                                        <i class="bi bi-dash-circle fa-2x"></i>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="row m-0 mb-5 p-5 border rounded-3 button-row">
                            <div class="form-group col p-0 m-0">
                                <input type="text" name="button_text[]" class="form-control form-control-solid" placeholder="Button Text">
                            </div>
                            <div class="align-items-center col d-flex form-group m-0 mx-2 p-0">
                                <input type="text" name="button_link[]" class="form-control form-control-solid me-2" placeholder="Button Link">                           
                            </div>
                        </div>
                    @endif
                </div>

                <label>Pointers</label><a href="javascript:void(0);" id="add-pointer-section"><i class="bi bi-plus fw-bolder fa-2x"></i></a>                
                <div class="row m-0 mb-10 p-5 border rounded-3" id="pointer-section-wrapper">
                    @if(!empty($banner->pointers))
                        @foreach(json_decode($banner->pointers, true) as $pointer)
                            <div class="row m-0 mb-5 p-5 border rounded-3 pointer-row">
                                <div class="form-group col p-0 m-0">
                                    <input type="text" name="pointer[]" value="{{ $pointer['pointer'] }}" class="form-control form-control-solid" placeholder="Pointer">
                                </div>
                                <div class="align-items-center col d-flex form-group m-0 mx-2 p-0">
                                    <input type="text" name="pointer_text[]" value="{{ $pointer['pointer_text'] }}" class="form-control form-control-solid me-2" placeholder="Pointer Text">
                                    <a href="javascript:void(0);" class="remove-pointer-section text-danger">
                                        <i class="bi bi-dash-circle fa-2x"></i>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="row m-0 mb-5 p-5 border rounded-3 pointer-row">
                            <div class="form-group col p-0 m-0">
                                <input type="text" name="pointer[]" class="form-control form-control-solid" placeholder="Pointer">
                            </div>
                            <div class="align-items-center col d-flex form-group m-0 mx-2 p-0">
                                <input type="text" name="pointer_text[]" value="" class="form-control form-control-solid me-2" placeholder="Pointer Text">
                            </div>                           
                        </div>                        
                    @endif
                </div>
                
                <div class="form-group">
                    <label>Type</label>
                    <input type="text" name="type" value="{{ old('type', $banner->type ?? '') }}"
                        class="form-control form-control-solid" placeholder="" required>
                </div>

                <div class="form-group">
                    <label>Status</label>
                    <select name="status" class="form-control form-control-solid" required>
                        <option value="1" {{ old('status', $banner->status ?? 1) == 1 ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('status', $banner->status ?? 1) == 0 ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-primary mr-2">{{ isset($banner) ? 'Update' : 'Save' }}</button>
                <a href="{{ route('admin.banners.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
	    <!--end::Form-->
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const addBtn = document.getElementById("add-button-section");
    const wrapper = document.getElementById("button-section-wrapper");

    addBtn.addEventListener("click", function () {
        const html = `
            <div class="row m-0 mb-5 p-5 border rounded-3 button-row">
                <div class="form-group col p-0 m-0">
                    <input type="text" name="button_text[]" class="form-control form-control-solid" placeholder="Button Text">
                </div>
                <div class="align-items-center col d-flex form-group m-0 mx-2 p-0">
                    <input type="text" name="button_link[]" class="form-control form-control-solid me-2" placeholder="Button Link">
                    <a href="javascript:void(0);" class="remove-button-section text-danger">
                        <i class="bi bi-dash-circle fa-2x"></i>
                    </a>
                </div>
            </div>
        `;
        wrapper.insertAdjacentHTML('beforeend', html);
    });

    wrapper.addEventListener("click", function (e) {
        if (e.target.closest(".remove-button-section")) {
            e.target.closest(".button-row").remove();
        }
    });
});

document.addEventListener("DOMContentLoaded", function () {
    const addPointer = document.getElementById("add-pointer-section");
    const wrapper = document.getElementById("pointer-section-wrapper");

    addPointer.addEventListener("click", function () {
        const html = `
            <div class="row m-0 mb-5 p-5 border rounded-3 pointer-row">
                <div class="form-group col p-0 m-0">
                    <input type="text" name="pointer[]" class="form-control form-control-solid" placeholder="Pointer">
                </div> 
                <div class="align-items-center col d-flex form-group m-0 mx-2 p-0">
                    <input type="text" name="pointer_text[]" class="form-control form-control-solid me-2" placeholder="Pointer Text">
                    <a href="javascript:void(0);" class="remove-pointer-section text-danger">
                        <i class="bi bi-dash-circle fa-2x"></i>
                    </a>
                </div>                               
            </div>           
        `;
        wrapper.insertAdjacentHTML('beforeend', html);
    });

    wrapper.addEventListener("click", function (e) {
        if (e.target.closest(".remove-pointer-section")) {
            e.target.closest(".pointer-row").remove();
        }
    });
});
</script>

@endsection