@extends('web.layouts.container')

@section('content')
    <div class="pg-header">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="#"><img src="{{asset('assets/web/images/icon-2.png')}}" alt="" class="icon"/></a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{__('packages.head')}}</li>
                </ol>
            </nav>
            <h2 class="title text-center mb-0">{{__('packages.head')}}</h2>
        </div>
    </div>
    @if(count($packages))
        {{--        <section class="pkgs-pg section">--}}
        {{--            <div class="container">--}}
        {{--                <div class="sec-heading text-center mb-5">--}}
        {{--                    <h2 class="title wow puff-in-center">{{__('packages.head')}}</h2>--}}
        {{--                    <p class="det wow zoomIn">{{__('packages.package_page_title')}}</p>--}}
        {{--                </div>--}}
        {{--                <div class="col-md-10 m-auto row">--}}
        {{--                    @foreach($packages as $package)--}}
        {{--                        <div class="col-md-6">--}}
        {{--                            <div class="pkg_card">--}}
        {{--                                <div class="card-heading">--}}
        {{--                                    <img class="icon" src="{{asset($package->image)}}"/>--}}
        {{--                                    <h5 class="title">{{$package->name}}</h5>--}}
        {{--                                    <h2 class="price mb-0"><b>{{$package->price}}</b> <small>{{__('packages.sar')}}</small></h2>--}}
        {{--                                </div>--}}
        {{--                                <div class="card-body">--}}
        {{--                                    <h6 class="li">--}}
        {{--                                        <b>{{__('packages.period')}}</b>--}}
        {{--                                        {{$package->period}}--}}
        {{--                                    </h6>--}}
        {{--                                    <h6 class="li">--}}
        {{--                                        <b>{{__('packages.available_users')}}</b>--}}
        {{--                                        {{$package->available_users . __('packages.users')}}--}}
        {{--                                    </h6>--}}
        {{--                                </div>--}}
        {{--                                <a href="#" class="butn borderd-blue-butn m-auto"><span class="text"> {{__('packages.subscribe_now')}} </span><span class="hvr"></span></a>--}}
        {{--                                <p class="note text-center mb-0 mt-2">{{__('packages.subscribe_now_hint')}}</p>--}}
        {{--                            </div>--}}
        {{--                        </div>--}}
        {{--                    @endforeach--}}
        {{--                </div>--}}
        {{--            </div>--}}
        {{--        </section>--}}


        <section class="packages-pg section">
            <div class="container">
                <div class="sec-heading text-center mb-5">
                    <h2 class="title wow puff-in-center">{{__('packages.head')}}</h2>
                    <p class="det wow zoomIn">{{__('packages.package_page_title')}}</p>
                </div>
                <div class="table-responsive">
                    <table class="table pkgs-table">
                        <thead class="main-head">
                        <tr>
                            <form class="package_form">
                                <th class="counting-head">
                                    <div class="quantity-container">
                                        <div class="inFlex">
                                            <h5 class="subtitle"><b>{{__('packages.companies')}}</b></h5>
                                            <div class="add-more">
                                                <button type="button" class="qt-minus"><i class="fas fa-minus"></i></button>
                                                @if($settings['show_company_control'])
                                                    <input type="number" class="qt" value="1" min="1" name="company_count">
                                                @else
                                                    <span class="qt">1</span>
                                                @endif
                                                <button type="button" class="qt-plus"><i class="fas fa-plus"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    {{--                                <div class="quantity-container ">--}}
                                    {{--                                    <div class="inFlex">--}}
                                    {{--                                        <h5 class="subtitle"><b>{{__('packages.branches')}}</b></h5>--}}
                                    {{--                                        <div class="add-more">--}}
                                    {{--                                            <button type="button" class="qt-minus"><i class="fas fa-minus"></i></button>--}}
                                    {{--                                            <span class="qt">3</span>--}}
                                    {{--                                            <button type="button" class="qt-plus"><i class="fas fa-plus"></i></button>--}}
                                    {{--                                        </div>--}}
                                    {{--                                    </div>--}}
                                    {{--                                </div>--}}
                                    <div class="quantity-container">
                                        <div class="inFlex">
                                            <h5 class="subtitle"><b>{{__('packages.employees')}}</b></h5>
                                            <div class="add-more">
                                                <button type="button" class="qt-minus"><i class="fas fa-minus"></i></button>
                                                @if($settings['show_employee_control'])
                                                    <input type="number" class="qt" value="5" min="5" name="employee_count">
                                                @else
                                                    <span class="qt">5</span>
                                                @endif
                                                <button type="button" class="qt-plus"><i class="fas fa-plus"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="period-container">
                                        <div class="inFlex">
                                            <h5 class="subtitle"> <b> {{__('packages.duration')}} </b> </h5>
                                            <div class="custom-control custom-radio">
                                                <input checked type="radio" id="period_1" name="period" class="custom-control-input period" value="period_1">
                                                <label class="custom-control-label" for="period_1"> 3 {{__('packages.months')}} </label>
                                            </div>
                                            <div class="custom-control custom-radio">
                                                <input type="radio" id="period_2" name="period" class="custom-control-input period" value="period_2">
                                                <label class="custom-control-label" for="period_2"> 6 {{__('packages.months')}} </label>
                                            </div>
                                            <div class="custom-control custom-radio">
                                                <input type="radio" id="period_3" name="period" class="custom-control-input period" value="period_3">
                                                <label class="custom-control-label" for="period_3"> {{__('packages.year')}} </label>
                                            </div>
                                        </div>
                                    </div>
                                </th>
                            </form>
                            @foreach($packages as $package)
                                <th class="pkg-head">
                                    <h6 class="pkg-name"><b>{{$package->name}}</b></h6>
                                    <div class="pkg-det">
                                        <div class="price_container_{{$loop->iteration}} d-none">
                                            <span class="company_price">{{$package->company_price}}</span>
                                            <span class="employee_price">{{$package->employee_price}}</span>
                                            <span class="price_1">{{$package->price_1}}</span>
                                            <span class="price_2">{{$package->price_2}}</span>
                                            <span class="price_3">{{$package->price_3}}</span>
                                        </div>
                                        {{--                                    <h5 class="last-price"><del>99 <small>ريال</small></del></h5>--}}
                                        <h5 class="price"><b class="total" data-price-container=".price_container_{{$loop->iteration}}">{{$package->company_price+($package->employee_price*5)+$package->price_1}}</b> <small>{{__('packages.sar')}}</small></h5>
                                        <div>
                                            <a target="_blank" href="{{isset($settings['try_now_button_link']) ? $settings['try_now_button_link'] : 'https://wowit.duckdns.org:8240/marketzy-register'}}‏" class="butn borderd-blue-butn mb-2"><span class="text"> {{__('packages.subscribe_now')}} </span><span class="hvr"></span></a>
                                            <a data-package="{{$package->id}}" href="{{route('checkRenewData')}}" class="butn borderd-blue-butn check_renew_data"><span class="text"> {{__('packages.renew')}} </span><span class="hvr"></span></a>
                                        </div>
                                    </div>
                                </th>
                            @endforeach
                        </tr>
                        </thead>
                        <tbody>

                        @if(count($packageFeatures))
                            @foreach($packageFeatures as $id => $packageFeature)
                                <tr>
                                    <td class="main-td inFlex">
                                        <button class="modal-butn details_button" data-toggle="modal" data-target="#pkgModal" data-detail-name=".detail_name_{{$id}}" data-details=".details_{{$id}}"><i class="fas fa-plus"></i></button>
                                        <h6 class="label mb-0"><b class="detail_name_{{$id}}">{{$packageFeature['name']}}</b></h6>
                                        <div class="d-none details_{{$id}}">
                                            {{json_encode($packageFeature['details'] ?? [], true)}}
                                        </div>
                                    </td>
                                    @if(count($packages))
                                        @foreach($packages as $package)
                                            <td class="data"><i class="fas fa-{{in_array($id, $package['features'] ?? []) ? 'check' : 'times'}}"></i></td>
                                        @endforeach
                                    @endif
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <div class="modal pkgModal fade modal_details" id="pkgModal" tabindex="-1" aria-labelledby="pkgModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="pkgModalLabel"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal pkgModal fade renew_modal" id="pkgModal" tabindex="-1" aria-labelledby="pkgModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="pkgModalLabel"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{route('renewPackage')}}" method="post" class="renew_form">
                            {{--                            <div class="form-group">--}}
                            {{--                                <input type="text" name="name" class="form-control" placeholder="{{__('members.name')}}">--}}
                            {{--                            </div>--}}
                            <div class="form-group">
                                <input type="text" name="serial" class="form-control" placeholder="{{__('members.serial')}}">
                            </div>
                            <button class="butn borderd-blue-butn complete_renew"><span class="text"> {{__('packages.complete_renew')}} </span><span class="hvr"></span></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    @endif
@endsection

@section('inner_js')
    <script>

        $('.check_renew_data').click(async function (e) {
            e.preventDefault();
            $(this).attr('disabled', 'disabled');

            let form = $('.package_form'),
                data = new FormData(form[0]),
                url = $(this).attr('href'),
                method = 'post';

            data.append('package_id', $(this).data('package'));

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                $(this).removeAttr('disabled');
                toasterError(response.errors);
            }
            if (!response.errors) {
                $('.renew_modal').modal();
            }
        });

        $('.complete_renew').click(async function (e) {
            e.preventDefault();
            // $(this).attr('disabled', 'disabled');

            let form = $('.renew_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = 'post';

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                $(this).removeAttr('disabled');
                toasterError(response.errors);
            }

            if (response.url) {
                window.location.href = response.url
            }
        });

        // $('.subscribe_now').click(async function (e) {
        //     e.preventDefault();
        //     $(this).attr('disabled', 'disabled');
        //
        //     let form = $('.package_form'),
        //         data = new FormData(form[0]),
        //         url = $(this).attr('href'),
        //         method = 'post';
        //
        //     data.append('package_id', $(this).data('package'));
        //
        //     const response=await ajax({
        //         url,
        //         data,
        //         dataType: 'json',
        //         method,
        //         contentType: false,
        //         processData: false,
        //     });
        //
        //     if (response.errors) {
        //         $(this).removeAttr('disabled');
        //         toasterError(response.errors);
        //     }
        //     if (response.url) {
        //         window.location.href = response.url;
        //     }
        // });


        $('.navbar').toggleClass('inner-nav home-nav');

        $('.details_button').click(function () {
            let details = JSON.parse($($(this).data('details')).html()),
                tableBody = $('.modal_details table tbody');
            tableBody.html('');
            $('.modal_details .modal-title').html($($(this).data('detail-name')).html());
            for(let i = 0; i < details.length; i++) {
                tableBody.append(
                    `<tr><td>`+details[i]+`</td></tr>`
                )
            }
        });

        // ------------ increase products -----------
        $(".qt-plus").click(function() {
            let company = $(this).parent().children("input[name='company_count'].qt"),
                employee = $(this).parent().children("input[name='employee_count'].qt");
            if (company.val() <= 0){
                company.val(1);
            }
            if (employee.val() < 5){
                employee.val(5);
            }
            $(this).parent().children(".qt").val(parseInt($(this).parent().children(".qt").val()) + 1);
        });

        $(".qt-minus").click(function() {

            let company = $(this).parent().children("input[name='company_count'].qt"),
                employee = $(this).parent().children("input[name='employee_count'].qt");

            if (parseInt(company.val()) > 1) {
                company.val(parseInt(company.val()) - 1);
            }

            if (parseInt(employee.val()) > 5) {
                employee.val(parseInt(employee.val()) - 1);
            }
            // $(this).parent().children(".full-price").addClass("minused");

        });

        $(".qt-plus, .qt-minus, .period").click(function () {
            calcPackageTotal();
        });

        $('input[name="company_count"], input[name="employee_count"]').change(function () {
            calcPackageTotal();
        });

        function calcPackageTotal() {
            let company_count = parseInt($('input[name="company_count"]').val()),
                employee_count = parseInt($('input[name="employee_count"]').val()),
                period = $('.period:checked').val();

            $('.total').each(function () {
                let price_container = $($(this).data('price-container'));
                let total = (company_count*parseInt(price_container.children('.company_price').html()))+
                    (employee_count*parseInt(price_container.children('.employee_price').html()));

                if(period === 'period_1'){
                    $(this).html(total+parseInt(price_container.children('.price_1').html()));
                }
                if(period === 'period_2'){
                    $(this).html(total+parseInt(price_container.children('.price_2').html()));
                }
                if(period === 'period_3'){
                    $(this).html(total+parseInt(price_container.children('.price_3').html()));
                }
            });

        }

    </script>
@endsection