@extends('user.layouts.master')
@section('css')

@endsection
@section('user-content')
    <div class="container-fluid mt-2">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-8 col-12">
                <div class="alert alert-success bg-warning text-white border-0">
                    <marquee scrollamount="6">
                        @foreach ($headlines as $key=>$headline)
                            <a href="{{ $headline->link }}" class="text-black" style="font-size:20px;"><i class="fe fe-link me-2 white-text" aria-hidden="true"></i>{{ $headline->title }}</a>
                        @endforeach
                    </marquee>
                </div>
            </div>
        </div>
    </div>
    <div class="card mt-2">
        <div class="card-header">
            <h4 class="card-title">{{ $title }}</h4>
        </div>
        <div class="card-body">
            <form action="{{ route('user.boost-post') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="form-group col-md-6 col-lg-6 col-12">
                        <label class="form-label">Category <span class="text-danger">*</span></label>
                        <select class="form-control" name="category_id" id="category_id" required onchange="chnageCategory()">
                            <option value="">Select One</option>
                            @foreach ($categorys as $key=>$category)
                                <option value="{{ $category->id }}" style="background-image:url({{ URL::to($category->image) }});"> {{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group col-md-6 col-lg-6 col-12">
                        <label class="form-label">Service <span class="text-danger">*</span></label>
                        <select class="form-control" name="sub_category" id="sub_category" required onchange="chnageSubCategory()">
                            <option value="">Select One</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="description" id="description" readonly cols="30" rows="4" maxlength="200" placeholder="Description" required></textarea>
                    </div>

                    <div class="form-group col-md-4 col-lg-4 col-12">
                        <label for="link" class="form-label">Link <span class="text-danger">*</span></label>
                        <input class="form-control" type="text" name="link" placeholder="Link" required>
                    </div>

                    <div class="form-group col-md-4 col-lg-4 col-12">
                        <label class="form-label">Quantity <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" name="work_need" id="work_need" value="100" min="1" onchange="chnageWorkNeed()" onkeyup="chnageWorkNeed()">
                        <input type="hidden" class="form-control" name="base_cost" id="base_cost" step="0.0001" value="0" min="0" readonly>
                        <input type="hidden" class="form-control" name="unit_cost" id="unit_cost" step="0.0001" value="0" min="0" readonly>
                    </div>

                    <div class="form-group col-md-4 col-lg-4 col-12">
                        <label class="form-label">Charge <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-append">
                                <button class="btn btn-primary" type="button">$</button>
                            </span>
                            <input type="number" class="form-control" readonly name="cost" id="cost" value="0" min="0">
                        </div>
                    </div>

                    <div class="form-group col-md-12 col-lg-12 col-12 text-center">
                        <button type="submit" class="btn btn-primary btn-lg mt-4 mb-0">Submit</button>
                    </div>

                </div>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <script>
        function chnageCategory(){
            var category_id = $('#category_id').val();
            $.ajax({
                url: "{{ route('user.get-boost-sub-category') }}",
                type:"POST",
                data:{
                    _token: '{{csrf_token()}}',
                    category_id: category_id,
                },
                success:function(data) {
                    console.log(data);
                    $('#sub_category').html(data);
                },
            });
        }

        function chnageSubCategory(){
            var sub_category = $('#sub_category').val();
            var work_need = parseFloat($('#work_need').val());
            $.ajax({
                url: "{{ route('user.get-boost-sub-category-price') }}",
                type:"POST",
                data:{
                    _token: '{{csrf_token()}}',
                    sub_category: sub_category,
                },
                success:function(data) {
                    console.log(data);
                    var cost = parseFloat(data['cost']);
                    $('#base_cost').val(data['cost']);
                    var unit_cost = (data['cost'] / 1000).toFixed(4);
                    $('#unit_cost').val(unit_cost);
                    var total_cost = (unit_cost * work_need).toFixed(4);
                    $('#cost').val(total_cost);
                    $('#description').val(data['notice']);
                },
            });
        }

        function chnageWorkNeed(){
            var work_need = parseFloat($('#work_need').val());
            var unit_cost = $('#unit_cost').val();
            var total_cost = (unit_cost * work_need).toFixed(4);
            $('#cost').val(total_cost);
        }
    </script>
@endsection