<?php $__env->startSection('css'); ?>
    <style>
    /* Custom styling for the page */
    .container-fluid {
        background-color: #f4f7fa;
        padding: 20px;
    }
    .marquee-container {
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #ffc107;
    }
    .marquee a {
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        color: #343a40;
        transition: color 0.3s ease;
    }
    .marquee a:hover {
        color: #007bff;
    }
    .card {
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }
    .card-header {
        background-color: #343a40;
        color: #fff;
        text-align: center;
        padding: 20px;
        border-radius: 12px 12px 0 0;
    }
    .card-title {
        font-size: 28px;
        font-weight: bold;
    }
    .form-control {
        border-radius: 8px;
        font-size: 16px;
        padding: 12px;
    }
    .form-label {
        font-weight: bold;
        color: #343a40;
    }
    .btn-primary {
        background-color: #007bff;
        border: none;
        border-radius: 8px;
        padding: 12px 20px;
        font-size: 18px;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }
    .btn-primary:hover {
        background-color: #0056b3;
    }
    .input-group {
        display: flex;
        align-items: center;
    }
    .input-group button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 8px 0 0 8px;
    }
    .input-group input {
        border-radius: 0 8px 8px 0;
        padding: 12px;
        font-size: 16px;
    }
    .text-center {
        text-align: center;
    }
    .form-group {
        margin-bottom: 20px;
    }
</style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('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">
                        <?php $__currentLoopData = $headlines; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$headline): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <a href="<?php echo e($headline->link); ?>" class="text-black" style="font-size:20px;"><i class="fe fe-link me-2 white-text" aria-hidden="true"></i><?php echo e($headline->title); ?></a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </marquee>
                </div>
            </div>
        </div>
    </div>
    <div class="card mt-2">
        <div class="card-header">
            <h4 class="card-title"><?php echo e($title); ?></h4>
        </div>
        <div class="card-body">
            <form action="<?php echo e(route('user.boost-post')); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <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>
                            <?php $__currentLoopData = $categorys; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($category->id); ?>"> <?php echo e($category->name); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </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>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('js'); ?>
    <script>
        function chnageCategory(){
            var category_id = $('#category_id').val();
            $.ajax({
                url: "<?php echo e(route('user.get-boost-sub-category')); ?>",
                type:"POST",
                data:{
                    category_id: category_id,
                    _token: '<?php echo e(csrf_token()); ?>',
                },
                success:function(data) {
                    console.log(data);
                    $('#sub_category').html(data);
                },
            });
        }

        function chnageSubCategory(){
            var sub_category = $('#sub_category').val();
            const myArray = sub_category.split("-");
            
            var work_need = parseFloat($('#work_need').val());
            
            var base_cost = myArray[1];
            console.log(base_cost);
            $('#base_cost').val(base_cost);
            var unit_cost = (parseFloat(base_cost) / 1000).toFixed(4);
            $('#unit_cost').val(unit_cost);
            var total_cost = (unit_cost * work_need).toFixed(4);
            $('#cost').val(total_cost);
            
            getSuCategoryData(myArray[0]);
        }
        
        function getSuCategoryData(id){
            $.ajax({
                url: "<?php echo e(route('user.get-boost-sub-category-data')); ?>",
                type:"POST",
                data:{
                    _token: '<?php echo e(csrf_token()); ?>',
                    id: id,
                },
                success:function(data) {
                    console.log(data);
                    $('#description').val(data);
                },
            });
        }

        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>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('user.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/asditzone/public_html/resources/views/user/pages/boost-package/create.blade.php ENDPATH**/ ?>