@extends('app')
@push('styles')
<style>


    @media only screen and (max-width: 600px) {
        .fixedDisplay{
            position: fixed !important;
            bottom: 0;
            justify-content: space-between;
            width: 100%;
            padding-right: 1rem;
        }
    }
</style>
@endpush

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

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Tailor</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                            <li class="breadcrumb-item active">Form Wizard</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Services</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="">


                <!-- Scrollable modal -->
                <button  type="button" class="btn btn-info float-end" data-bs-toggle="modal" data-bs-target="#scrollable-modal">Rate</button>
                <div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-scrollable" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                {{-- <h5 class="modal-title" id="scrollableModalTitle">Modal title</h5> --}}
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                            </div>
                            <div class="modal-body">

                                <div class="">
                                    <div class="border p-3 mt-4 mt-lg-0 rounded">
                                        <h4 class="header-title mb-3">
                                            Rate
                                        </h4>
                                        <div class="table-responsive">


                                            <table class="table mb-0">
                                                <tbody>
                                                    @forelse ($products as $item)
                                                    <tr>
                                                        <td>{{$item->product_name}}:</td>
                                                        <td>{{$item->rate}} BDT</td>
                                                    </tr>
                                                    @empty
                                                    <tr>
                                                        <td>No data found!</td>
                                                    </tr>
                                                     @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- end table-responsive -->
                                    </div>
                                </div> <!-- end col -->

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                {{-- <button type="button" class="btn btn-primary">Save changes</button> --}}
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
            </div>
                    <div class="card-body p-0 m-0">

                        {{-- <h4 class="header-title mb-3">Wizard With Progress Bar</h4> --}}

                            @if(Session::has('response'))
                                    {!!Session::get('response')['message']!!}
                                @endif
                                @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                        <li class="invalid-tooltips">{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif
                            <div id="progressbarwizard">
                                <div class="col-8 offset-2">
                                    <ul class="offset-2 nav nav-pills nav-justified form-wizard-header mb-3">
                                        <li class="nav-item">
                                            <a href="#account-2" data-bs-toggle="tab" data-toggle="tab"  class="nav-link rounded-md pt-2 pb-2">
                                                <i class="mdi mdi-account-circle me-1"></i>
                                                <span class="d-none d-sm-inline">Customer</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#profile-tab-2" data-bs-toggle="tab" data-toggle="tab"  class="nav-link rounded-0 pt-2 pb-2">
                                                <i class="mdi mdi-face-profile me-1"></i>
                                                <span class="d-none d-sm-inline">Size</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#finish-2" data-bs-toggle="tab" data-toggle="tab"  class="nav-link rounded-0 pt-2 pb-2">
                                                <i class="mdi mdi-checkbox-marked-circle-outline me-1"></i>
                                                <span class="d-none d-sm-inline">Finish</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="tab-content b-0 mb-0">
                                    <div class="tab-pane row" id="account-2">
                                        <x-services.stepone />
                                        <ul class="list-inline mb-0 wizard fixedDisplay">
                                            <li class="previous list-inline-item">
                                                <a href="#" class="btn btn-info">Previous</a>
                                            </li>
                                            <li class="next list-inline-item float-end">
                                                <a href="#" class="btn btn-info">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="tab-pane" id="profile-tab-2">
                                        <form method="POST" id="serviceForm" action="{{route('newservice')}}">
                                            @csrf
                                            <input type="text" id="customerId" name="customer_id" hidden>
                                        <x-services.steptwo :products=$products/>
                                        <ul class="list-inline mb-0 wizard fixedDisplay">
                                            <li class="previous list-inline-item">
                                                <a href="#" class="btn btn-info">Previous</a>
                                            </li>
                                            <li class="next list-inline-item float-end">
                                                <a href="#" class="next btn btn-info">Next</a>
                                            </li>
                                        </ul>
                                    </div>


                                <div class="tab-pane" id="finish-2">
                                    <x-services.stepthree />

                                </div>

                                <ul class="list-inline mb-0 wizard fixedDisplay">
                                    <li class="previous list-inline-item">
                                        <a href="#" class="btn btn-info">Previous</a>
                                    </li>
                                    <li class="next list-inline-item float-end">
                                        <button
                                        data-bs-toggle="modal" data-bs-target="#invoice"
                                        type="button"
                                        onclick="hanleSubmit(this)"
                                        class="btn btn-info">
                                            Next
                                        </button>
                                    </li>
                                </ul>
                                </form>
                                </div> <!-- tab-content -->
                            </div> <!-- end #progressbarwizard-->


                    </div> <!-- end card-body -->
                </div> <!-- end card-->
            </div> <!-- end col -->
        </div>
    </div>
</div>




{{-- @Product size modal start--}}
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Add Size</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div> <!-- end modal header -->
            <div class="modal-body">
                {{-- start form --}}
                    <form action="" method="POST" id="addSize">
                        <div class="mb-3">
                            <label class="col-form-label" for="userName1">
                                {{__('Product')}}:
                            </label>
                            <h4 class="text-center font-semibold" id="product_size_name"></h4>
                            <div class="">
                                <input type="text" id="size_product" class="form-control" hidden name="product">

                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="col-md-3 col-form-label" for="userName1">
                                {{__('Size')}}:
                            </label>
                            <div class="mt-1 alert alert-secondary" role="alert">
                                <strong>Note - </strong> Only Number character ,comma and desh are allowed!
                            </div>
                            <div class="">
                                <input type="text" class="form-control is-valid"  name="size" value="{{old('size')}}">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" onclick="handleSizeSubmit(this)" class="btn btn-primary" data-bs-dismiss="modal">Save</button>
                        </div> <!-- end modal footer -->
                    </form>
                {{-- END --}}
            </div>

        </div> <!-- end modal content-->
    </div> <!-- end modal dialog-->
</div> <!-- end modal-->

{{-- !end product size modal --}}


{{-- @Invoice modal start--}}
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="invoice" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div> <!-- end modal header -->
            <div class="modal-body">
                Make sure all the data inputed correctly.Are you sure to submit the order?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="serviceSubmit()">Confirm</button>
            </div> <!-- end modal footer -->
        </div> <!-- end modal content-->
    </div> <!-- end modal dialog-->
</div> <!-- end modal-->
{{-- !end INVOICE modal --}}


@endsection

@push('scripts')

        <!-- demo app -->
        <script src="{{asset('assets/js/pages/demo.form-wizard.js')}}"></script>
        <!-- end demo js-->
        <script src="{{asset('assets/js/jquery.repeater.min.js')}}"></script>

        {{-- <script src="{{asset('assets/js/pages/demo.dashboard-analytics.js')}}"></script> --}}
<script>
    $(document).ready(function () {
        $('.repeater').repeater({
            // (Required if there is a nested repeater)
            // Specify the configuration of the nested repeaters.
            // Nested configuration follows the same format as the base configuration,
            // supporting options "defaultValues", "show", "hide", etc.
            // Nested repeaters additionally require a "selector" field.
            repeaters: [{
                // (Required)
                // Specify the jQuery selector for this nested repeater
                selector: '.inner-repeater'
            }]
        });
    });
</script>

<script>
 let subtotalField = $('#sub_amount');

function totalCounter(){
        let subTotal = parseFloat(subtotalField.val());
        let discount = parseFloat($('#discount').val());
        let tax = parseFloat($('#tax').val());
        // if(subTotal < 0)subTotal=0;
        if(!discount)discount=0;
        if(tax>0){
            tax = subTotal*(tax/100)
        }else{
            tax = 0;
        }
        let total = Math.round(subTotal - discount + tax);

         $('.totalCount').val(total);
         total = $('#total_amount').val(total);
    }
    // subtotalcount
    function subtotalCounter(){
        let subTotal = 0;
        $('.rowdata').find('.subtotal').each(function(e){
            subTotal += parseFloat($(this).val())
        })
        subtotalField.val(subTotal);
        $('.sub_amount').text(subTotal+'৳');
        console.log(subTotal);
        totalCounter();
    }

    // console.log(productPrice);
    function handleQuntityCahnge(e){
          let productPrice = parseFloat($(e).closest('.rowdata').find('#product_name').children('option:selected').data('product-price'));
          // $(e).closest('.row').find('.sub').val(sub);
          $(e).closest('.rowdata').find('.subtotal').val(productPrice * e.value);
          subtotalCounter()
      }

    let subFormBtn = $('.subFormBtn');


    subFormBtn.on('click',() => {
        let serviceForm = $('#serviceForm').serialize();
        // let serviceFormObj = {};
        // // let formData = new formData(serviceForm);s
        // $.each(serviceForm,
        //     function(i, v) {
        //         serviceFormObj[v.name] = v.value;
        //     });
        // console.log(serviceForm);
        // console.log(serviceForm.serialize());


        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post('{{route('newservice')}}',serviceForm,{
                Headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
        //         'Content-Type':'application/json'
                }
            }).then(({response})=>{
                // console.log(response.data);
            }).catch(({response})=>{
                console.log(response.data.message);
            })
        });
    });

    function handleProduct(){
        let serviceForm = document.getElementById('serviceForm');
        let formData = new FormData(serviceForm);
        // console.log(formdata.outer_list)
//
        for (const data of formData) {
                console.log(data["outer_list[0][product]"]);
        }
    }

    function hanleSubmit(e){
        const serviceForm = $("#serviceForm")
        // let serviceFormData = new FormData(serviceForm);
        let serviceFormData = serviceForm.serialize();
    };

// add size
    const handleSizeSubmit = (event) =>{

        let formSize = document.getElementById("addSize");
        let sizeData = new FormData(formSize);
        sizeData.append('customer_id',$("#customerId").val());
        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post(
                '{{route('addSize')}}',sizeData,
                {
                Headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
        //         'Content-Type':'application/json'
                }
            }).then(({data})=>{
                formSize.reset();
                if(data.status=='success'){
                    $(`.size_${data.data.product_id}`).val(data.data.size).addClass("is-valid").removeClass(`is-invalid size_${data.data.product_id}`);
                }
            }).catch(({data})=>{
                console.log(response.data.message);
            })
        });

    }


    function serviceSubmit(){
        $("#serviceForm").submit();
    }
</script>
@endpush