@extends('layouts.master')
@section('content')
<style>
    .dis-slab-card {
        font-size: 13px;
        margin: 0;
    }

    .dis-input {
        font-size: 13px;
        border: solid 1px #e8e8e8;
        width: 100px;
        height: 25px;
        padding-left: 8px
    }

    .dis-input:focus {
        border: solid 1px #0038ba
    }

    .topsec {
        background-color: #f7f7f7;
        font-size: 13px;
        padding: 10px 0px;
        margin: 0
    }

    .dis-slab-card .btn-primary {
        font-size: 13px;
        padding: 5px 35px;
        line-height: 1;
        box-shadow: none;
    }

    .dis-slab-card .red-bg {
        border-color: #f12300;
        box-shadow: none;
    }

    .dis-slab-card .add-slab-btn {
        width: 100%;
        font-size: 14px;
        padding: 10px
    }

    .add-slab-btn {
        letter-spacing: 1px;
        border: solid 1px #003db6;
        background: linear-gradient(90deg, #ededed 0%, #ededed 100%);
        color: #282828;
        border: none;
        padding: 5px 35px;
    }

    .add-slab-btn:Hover,
    .add-slab-btn:focus {
        border: none;
    }

    .slab-card-row {
        line-height: 25px;
        border: solid 1px #e5e5e5;
        border-top: none;
        margin: 0;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .pt-28 {
        padding-top: 28px
    }

</style>

<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Discount <span> Management</span></h2>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Discount Slabs</span></a></li>
            <li><span>Create</span></li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card PB-20">

            <div class="header">
                <a class="btn add_button save_discount_slab"><i class="fa fa-plus"></i> <span>Save</span></a>
                <h2>Discount <span>Slabs</span></h2>
            </div>

            <div id="floating-label" class="row m-0">
                <div class="form-wrap PB-10 PT-10">
                    <div class="row m-0">
                        <div class="col-3 pr-0">
                            <label class="font12 mb-5">Segment Type*</label>
                            <div class="form-s2">
                                <select class="form-control formselect segment_id_for_discount" placeholder="select Segment Type" style="width: 100%">
                                    <option selected disabled value="0">Select Segment Type</option>
                                    @foreach ($segments as $value)
                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-3 pr-0">
                            <label class="font12 mb-5">Chanel Type*</label>
                            <div class="form-s2">
                                <select class="form-control formselect channel_id_for_discount" placeholder="select Chanel Type"
                                    style="width: 100%">
                                    <option selected disabled value="0">Select Chanel Type</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-auto pt-28">
                            <button type="button" class="btn btn-primary btn-line create_discount"
                                style="line-height:1; height: 34px; box-shadow:none">Create Discount Slabs</button>
                        </div>
                    </div>


                    <div class="row dis-slab-card lower_slabs_area" style="display:none">
                        <div class="col-12 PT-15">
                            <div class="row topsec">
                                <div class="col-4"><strong>Segment Type:</strong> <span class="segment_name"></span></div>
                                <div class="col-4"><strong>Chanel Type:</strong> <span class="channel_name"></span></div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="slabs_div">

                            </div>
                            {{-- <div class="row slab-card-row">
                                <div class="col-auto pr-0">Amount</div>
                                <div class="col-auto pr-0">
                                    <input type="text" class="dis-input" id="" placeholder="1000">
                                </div>
                                <div class="col-auto pr-0">To</div>
                                <div class="col-auto pr-0">
                                    <input type="text" class="dis-input" id="" placeholder="1500">
                                </div>
                                <div class="col-auto pr-0">Discount (%)</div>
                                <div class="col-auto pr-0">
                                    <input type="text" class="dis-input" id="" placeholder="3">
                                </div>
                                <div class="col-auto pr-0">
                                    <button type="submit" class="btn btn-primary btn-line">Edit</button>
                                    <button type="submit" class="btn btn-primary red-bg ml-2">Remove </button>
                                </div>
                            </div>

                            <div class="row slab-card-row">
                                <div class="col-auto pr-0">Amount</div>
                                <div class="col-auto pr-0">
                                    <input type="text" class="dis-input" id="" placeholder="0">
                                </div>
                                <div class="col-auto pr-0">To</div>
                                <div class="col-auto pr-0">
                                    <input type="text" class="dis-input" id="" placeholder="0">
                                </div>
                                <div class="col-auto pr-0">Discount (%)</div>
                                <div class="col-auto pr-0">
                                    <input type="text" class="dis-input" id="" placeholder="0">
                                </div>
                                <div class="col-auto pr-0">
                                    <button type="submit" class="btn btn-primary btn-line">Add</button>
                                </div>
                            </div> --}}

                            <div class="row">
                                <div class="col-12">
                                    <button type="button" class="btn btn-primary add-slab-btn add_another_slab">Add New Slab</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection