@extends('layouts.back-end.app')

@section('title', translate('Bundles'))

@section('content')
    <div class="content container-fluid">
        <div class="mb-3">
            <h2 class="h1 mb-0 text-capitalize d-flex align-items-center gap-2">
                <img src="{{dynamicAsset(path: 'assets/back-end/img/coupon_setup.png')}}" alt="">
                {{translate('Bundles')}}
            </h2>
        </div>

        <div class="row">
            <div class="col-sm-12 col-lg-12 mb-3 mb-lg-2">
                <div class="card">
                    <div class="card-body">
                        <form action="{{route('admin.bundle.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <ul class="nav nav-tabs w-fit-content mb-4">
                                @foreach($languages as $lang)
                                    <li class="nav-item">
                                        <span class="nav-link form-system-language-tab cursor-pointer {{$lang == $defaultLanguage ? 'active':''}}"
                                              id="{{$lang}}-link">
                                            {{ ucfirst(getLanguageName($lang)).'('.strtoupper($lang).')' }}
                                        </span>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="row">
                                <div class="col-md-6 col-lg-6 form-group">

                                    @foreach($languages as $lang)
                                        <div
                                            class="col-md-12 col-lg-12 form-group {{$lang != $defaultLanguage ? 'd-none':''}} form-system-language-form {{app()->getLocale() == 'en' ? 'text-left' : 'text-right'}}"
                                            id="{{$lang}}-form">
                                            <label for="name" class="title-color">
                                                {{ translate('Name') }}
                                                <span class="text-danger">*</span>
                                                ({{strtoupper($lang) }})
                                            </label>
                                            <input type="text" name="name[]" class="form-control" id="name" value=""
                                                   placeholder="{{translate('Bundle Name')}}" {{$lang == $defaultLanguage? 'required':''}}>
                                        </div>
                                        <input type="hidden" name="lang[]" value="{{$lang}}">
                                    @endforeach

                                    <div class="col-md-12 col-lg-12 form-group">
                                        <label for="price"
                                               class="title-color font-weight-medium d-flex">{{translate('Price')}}</label>
                                        <input type="number" min="1" name="price" class="form-control" value="{{ old('price') }}"
                                               id="price"
                                               placeholder="{{translate('Bundle Price')}}" required>
                                    </div>

                                    <div class="col-md-12 col-lg-12 mb-3 {{app()->getLocale() == 'en' ? 'text-left' : 'text-right'}}">
                                        <label class="title-color">{{ translate('Image') }}</label>
                                        <span class="text-info"><span class="text-danger">*</span> {{ THEME_RATIO[theme_root_path()]['Product Image'] }}</span>
                                        <div class="custom-file text-left">
                                            <input type="file" name="image" id="bundle-image"
                                                   class="custom-file-input image-preview-before-upload"
                                                   data-preview="#bundle_viewer"
                                                   accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*"
                                                   required>
                                            <label class="custom-file-label"
                                                   for="bundle-image">{{ translate('choose_File') }}</label>
                                        </div>
                                    </div>

                                    <div class="col-md-12 col-lg-12 form-group">
                                        <label for="first_id"
                                               class="title-color font-weight-medium d-flex">{{translate('First Product')}}</label>
                                        <select class="form-control" id="first_id" name="first_id" required>
                                            @foreach($products as $product)
                                                <option value="{{$product->id}}">{{$product->name}} ({{$product->unit_price}} SAR)</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-12 col-lg-12 form-group">
                                        <label for="second_id"
                                               class="title-color font-weight-medium d-flex">{{translate('Second Product')}}</label>
                                        <select class="form-control" id="second_id" name="second_id" required>
                                            @foreach($products as $product)
                                                <option value="{{$product->id}}">{{$product->name}} ({{$product->unit_price}} SAR)</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6 form-group">
                                        <div class="text-center mx-auto">
                                            <img class="upload-img-view" id="bundle_viewer" alt="" style=""
                                                 src="{{ dynamicAsset(path: 'assets/back-end/img/placeholder/placeholder-2-1.png') }}">
                                        </div>

                                </div>
                            </div>

                            <div class="d-flex align-items-center justify-content-end flex-wrap gap-10">
                                <button type="reset" class="btn btn-secondary px-4">{{translate('reset')}}</button>
                                <button type="submit" class="btn btn--primary px-4">{{translate('submit')}}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-20">
            <div class="col-md-12">
                <div class="card">
                    <div class="table-responsive">
                        <table id="datatable"
                               class="table table-hover table-borderless table-thead-bordered table-nowrap table-align-middle card-table {{ Session::get('direction') === 'rtl' ? 'text-right' : 'text-left' }}">
                            <thead class="thead-light thead-50 text-capitalize">
                            <tr>
                                <th>{{translate('SL')}}</th>
                                <th>{{translate('Name')}}</th>
                                <th>{{translate('Price')}}</th>
                                <th>{{translate('First Product')}}</th>
                                <th>{{translate('Second Product')}}</th>
                                <th class="text-center">{{translate('action')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($bundles as $key => $bundle )
                                <tr class="parent_row">
                                    <td>{{ $key + 1 }}</td>
                                    <td>
                                        <a href="javascript:void(0)"
                                           class="media align-items-center gap-2">
                                            <img src="{{ getStorageImages(path: $bundle->bundleProduct->thumbnail_full_url, type: 'backend-product') }}"
                                                 class="avatar border" alt="">
                                            <span class="media-body title-color hover-c1">
                                            {{ Str::limit($bundle->bundleProduct['name'], 20) }}
                                                <br>
                                                <strong>{{translate('code')}}: {{$bundle->bundleProduct['code']}}</strong>
                                        </span>
                                        </a>

                                    </td>
                                    <td class="text-capitalize">{{$bundle->bundleProduct['unit_price']}}</td>
                                    <td class="text-capitalize">{{$bundle->firstProduct['name']}}</td>
                                    <td class="text-capitalize">{{$bundle->secondProduct['name']}}</td>

                                    <td class="d-flex align-items-center gap-1">
                                        <a class="btn btn-outline--primary btn-sm edit"
                                           href="{{route('admin.bundle.edit',[$bundle['id']])}}"
                                           title="{{ translate('edit')}}">
                                            <i class="tio-edit"></i>
                                        </a>
                                        <button type="button" data-url="{{route('admin.bundle.destroy',['bundle'=>$bundle->id])}}" id="service_item_{{$bundle->id}}"
                                                data-item-id="{{ $bundle->id }}"
                                                class="btn btn-outline-danger btn-sm square-btn text-center m-auto delete-category" onclick="fireDeleteModal(this)"
                                                data-toggle="modal"
                                                data-target="#new_delete_modal">
                                            <i class="tio-delete"></i>
                                        </button>

                                    </td>
{{--                                    <td>--}}
{{--                                        <div class="d-flex gap-10 justify-content-center">--}}
{{--                                            <button class="btn btn-outline--primary square-btn btn-sm mr-1 get-quick-view" data-id="{{ $coupon['id'] }}">--}}
{{--                                                <img src="{{dynamicAsset(path: 'assets/back-end/img/eye.svg')}}" class="svg" alt="">--}}
{{--                                            </button>--}}
{{--                                            <a class="btn btn-outline--primary btn-sm edit"--}}
{{--                                               href="{{route('admin.coupon.update',[$coupon['id']])}}"--}}
{{--                                               title="{{ translate('edit')}}"--}}
{{--                                            >--}}
{{--                                                <i class="tio-edit"></i>--}}
{{--                                            </a>--}}
{{--                                            <a class="btn btn-outline-danger btn-sm delete delete-data"--}}
{{--                                               href="javascript:"--}}
{{--                                               data-id="coupon-{{$coupon['id']}}"--}}
{{--                                               title="{{translate('delete')}}"--}}
{{--                                            >--}}
{{--                                                <i class="tio-delete"></i>--}}
{{--                                            </a>--}}
{{--                                            <form action="{{route('admin.coupon.delete',[$coupon['id']])}}"--}}
{{--                                                  method="post" id="coupon-{{$coupon['id']}}">--}}
{{--                                                @csrf @method('delete')--}}
{{--                                            </form>--}}
{{--                                        </div>--}}

{{--                                    </td>--}}
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <div class="modal fade" id="quick-view" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered coupon-details" role="document">
                                <div class="modal-content" id="quick-view-modal">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive mt-4">
                        <div class="px-4 d-flex justify-content-lg-end">
                            {{$bundles->links()}}
                        </div>
                    </div>

                    @if(count($bundles)==0)
                        @include('layouts.back-end._empty-state',['text'=>'no_coupon_found'],['image'=>'default'])
                    @endif
                </div>
            </div>
        </div>
    </div>

    <span id="coupon-bearer-url" data-url="{{route('admin.coupon.ajax-get-vendor')}}"></span>
    <span id="get-detail-url" data-url="{{ route('admin.coupon.quick-view-details') }}"></span>
@endsection

@push('script')
    <script src="{{dynamicAsset(path: 'assets/back-end/js/admin/coupon.js')}}"></script>
    <script !src="">
        let first_id = $("#first_id");
        first_id.select2();
        let second_id = $("#second_id");
        second_id.select2();
    </script>
@endpush
@include('admin-views.category.includes.script')