@extends('admin.layout.master')
@section('title', 'PURCHASE')
@section('custom_style')
    @include('inventory.blade_styles.posting_blade_css')
    <style>
        {!! $setting->style_css !!}
    </style>
@endsection
@section('content')

<div class="cl-card card border-secondary border-opacity-50 rounded-2">
    <div class="card-header px-2 d-flex justify-content-between align-items-center">
        <h6 class="card-title m-0">{{__('obs.purchase')}}</h6>
    </div>
    <div class="card-body">
        <nav class="mb-2">
            <div class="nav nav-tabs" role="tablist">
                <button class="nav-link active" data-bs-target="#invoice" data-bs-toggle="tab" type="button" role="tab"
                    aria-controls="nav-invoice" aria-selected="true">
                    {{__('obs.invoice')}}
                </button>
                <button class="nav-link" data-bs-target="#transportation-tab" data-bs-toggle="tab" type="button" role="tab"
                    aria-controls="nav-transportation" aria-selected="false">
                    {{__('obs.transportation')}}</button>
                <button class="nav-link" data-bs-target="#install-invoice-tab" data-bs-toggle="tab" type="button" role="tab"
                    aria-controls="nav-install-invoice" aria-selected="false">
                    {{__('obs.install')}} {{__('obs.invoice')}}</button>
                <button class="nav-link" data-bs-target="#install-from-category-tab" data-bs-toggle="tab" type="button" role="tab"
                    aria-controls="nav-install-from-category" aria-selected="false">
                    {{__('obs.install')}} {{__('obs.from')}} {{__('obs.category')}}</button>
            </div>
        </nav>
    
        <div class="tab-content">
            <div class="tab-pane fade show active" id="invoice" role="tabpanel"
                tabindex="0">
                
                <div class="row">
                    <div class="col-12">
                        {{-- copy code --}}
                        <form>
                            <div class="row gx-2 gy-0">
                                <div
                                    class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label for="nameSelect" class="form-label cl-form-label">{{__('obs.vendor')}}</label>
                                        <select id="nameSelect" class="select_2 form-select cl-form-select">
                                            <option value="0" selected>
                                                {{__('obs.select')}} {{__('obs.party')}}
                                            </option>
                                            <option value="1">
                                                {{__('obs.male')}}
                                            </option>
                                            <option value="2">
                                                {{__('obs.female')}}
                                            </option>
                                            <option value="3">
                                                {{__('obs.other')}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label for="nameSelect" class="form-label cl-form-label">
                                            {{__('obs.cost')}} {{__('obs.center')}}
                                        </label>
                                        <select
                                            id="nameSelect"
                                            class="select_2 form-select cl-form-select">
                                            <option
                                                value="0"
                                                selected>
                                                {{__('obs.choose')}}...
                                            </option>
                                            <option
                                                value="1">
                                                {{__('obs.male')}}
                                            </option>
                                            <option
                                                value="2">
                                                {{__('obs.female')}}
                                            </option>
                                            <option
                                                value="3">
                                                {{__('obs.other')}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div
                                    class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label
                                            for="nameSelect"
                                            class="form-label cl-form-label">{{__('obs.pay')}} {{__('obs.type')}}</label>
                                        <select
                                            id="nameSelect"
                                            class="select_2 form-select cl-form-select">
                                            <option
                                                value="0"
                                                selected>
                                                Choose...
                                            </option>
                                            <option
                                                value="1">
                                                {{__('obs.male')}}
                                            </option>
                                            <option
                                                value="2">
                                                {{__('obs.female')}}
                                            </option>
                                            <option
                                                value="3">
                                                {{__('obs.other')}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label
                                            for="nameSelect"
                                            class="form-label cl-form-label">{{__('obs.pay')}} {{__('obs.type')}} {{__('obs.list')}}</label>
                                        <select
                                            id="nameSelect"
                                            class="select_2 form-select cl-form-select">
                                            <option
                                                value="0"
                                                selected>
                                                {{__('obs.choose')}}...
                                            </option>
                                            <option
                                                value="1">
                                                {{__('obs.male')}}
                                            </option>
                                            <option
                                                value="2">
                                                {{__('obs.female')}}
                                            </option>
                                            <option
                                                value="3">
                                                {{__('obs.other')}}
                                            </option>
                                        </select>
                                    </div>
                                </div> 
                                <div
                                    class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label
                                            for="textInput"
                                            class="form-label cl-form-label">{{__('obs.ref')}} {{__('obs.no')}}</label>
                                        <input
                                            type="text"
                                            class="form-control cl-form-control"
                                            id="textInput">
                                    </div>
                                </div>
                                <div
                                    class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label
                                            for="description"
                                            class="form-label cl-form-label">{{__('obs.desc')}}</label>
                                        <input
                                            type="text"
                                            class="form-control cl-form-control"
                                            id="description">
                                    </div>
                                </div>
                                <div
                                    class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label
                                            for="dateInput"
                                            class="form-label cl-form-label">{{__('obs.date')}}</label>
                                        <input
                                            type="text"
                                            class="form-control date-picker cl-form-control"
                                            id="dateInput">
                                    </div>
                                </div>
                                <div
                                    class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label
                                            for="attachInput"
                                            class="form-label cl-form-label">{{__('obs.attach')}}</label>
                                        <input
                                            type="file"
                                            class="form-control cl-form-control"
                                            id="attachInput">
                                    </div>
                                </div>
                                <div
                                    class="col-md-2 col-sm-8 col-6">
                                    <div class="mb-0">
                                        <label
                                            for="billNo"
                                            class="form-label cl-form-label">{{__('obs.bill')}} {{__('obs.no')}}
                                        </label>
                                        <input
                                            type="text"
                                            class="form-control cl-form-control"
                                            id="billNo">
                                    </div>
                                </div>
                                <div
                                    class="col-md-2 col-sm-4 col-6">
                                    <div class="mb-0">
                                        <label
                                            for="billDateInput"
                                            class="form-label cl-form-label">{{__('obs.bill')}} {{__('obs.date')}}</label>
                                        <input
                                            type="text"
                                            class="form-control date-picker cl-form-control"
                                            id="billDateInput">
                                    </div>
                                </div>
                                <div
                                    class="col-md-2 col-sm-4 col-6">
                                    <div
                                        class="mb-0 h-100 d-flex flex-wrap align-items-center ">
                                        <div
                                            class="w-100">
                                            <div
                                                class="form-check cl-form-check me-2">
                                                <input
                                                    class="form-check-input cl-form-check-input"
                                                    type="checkbox"
                                                    value=""
                                                    id="checkInput3"
                                                    checked>
                                                <label
                                                    class="form-check-label cl-form-check-label"
                                                    for="checkInput3">
                                                    {{__('obs.stand')}} {{__('obs.by')}}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="col-md-2 col-sm-6 col-6">
                                    <div class="mb-0 mt-2">
                                        <button
                                            type="button"
                                            class="btn btn-primary cl-btn cl-btn-primary">
                                            <i
                                                class="icofont-plus"></i>
                                            {{__('obs.add')}} {{__('obs.expense')}}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        {{-- copy code --}}
                    </div>
                </div>
                
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="cl-table-container rounded-2" style="height: 440px">
                            <table class="table mb-0 rounded-2 cl-bg-gray-100 cl-table"
                                style="min-width: 992px">
                                <thead>
                                    <tr>
                                        <th class="text-center cl-fixed-cell" scope="col"
                                            style="width: 25px">#</th>
                                        <th class="text-center cl-fixed-cell" scope="col"
                                            style="width: 16%">{{__('obs.products')}}</th>
                                        <th class="text-center cl-fixed-cell" scope="col">{{__('obs.products')}}</th>
                                        <th class="text-center" scope="col">{{__('obs.products')}}</th>
                                        <th class="text-center" scope="col">{{__('obs.unit')}}</th>
                                        <th class="text-center" scope="col">{{__('obs.qty')}}</th>
                                        <th class="text-center" scope="col" style="width: 10%">{{__('obs.price')}}
                                        </th>
                                        <th class="text-center" scope="col">{{__('obs.disc.')}} {{__('obs.(%)')}}</th>
                                        <th class="text-center" scope="col">{{__('obs.m.')}} {{__('obs.disc.')}}</th>
                                        <th class="text-center" scope="col">{{__('obs.net')}} {{__('obs.price')}} </th>
                                        <th class="text-center" scope="col">{{__('obs.actions')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @for ($i = 1; $i <= 30; $i++)
                                        <tr>
                                            <th scope="row" class="text-center cl-fixed-cell">
                                                {{ $i }}</th>
                                            <td class="text-center cl-fixed-cell">
                                                <select id="nameSelect"
                                                    class="form-select cl-form-select">
                                                    <option value="0" selected>{{__('obs.choose')}}...</option>
                                                    <option value="1">Kishwan Chocolate Cookie
                                                    </option>
                                                    <option value="2">{{__('obs.banoful')}} {{__('obs.chanachur')}}</option>
                                                    <option value="3">Kishwan Cake</option>
                                                </select>
                                            </td>
                                            <td class="text-center cl-fixed-cell">
                                                <select id="nameSelect"
                                                    class="form-select cl-form-select">
                                                    <option value="0" selected>Choose...</option>
                                                    <option value="1">Kishwan Chocolate Cookie
                                                    </option>
                                                    <option value="2">Banoful Chanachur</option>
                                                    <option value="3">Kishwan Cake</option>
                                                </select>
                                            </td>
                                            <td class="text-center">
                                                <select id="nameSelect"
                                                    class="form-select cl-form-select">
                                                    <option value="0" selected>Choose...</option>
                                                    <option value="1">Kishwan Chocolate Cookie
                                                    </option>
                                                    <option value="2">Banoful Chanachur</option>
                                                    <option value="3">Kishwan Cake</option>
                                                </select>
                                            </td>
                                            <th class="text-center">
                                                {{__('obs.kg')}}
                                            </th>
                                            <td class="text-center">
                                                <input type="number" class="form-control cl-form-control"
                                                    id="qty">
                                            </td>
                                            <td class="text-center">
                                                <input type="number" class="form-control cl-form-control"
                                                    id="price">
                                            </td>
                                            <td class="text-center">
                                                <input type="number" class="form-control cl-form-control"
                                                    id="disc">
                                            </td>
                                            <td class="text-center">
                                                <input type="number" class="form-control cl-form-control"
                                                    id="m-disc">
                                            </td>
                                            <td class="text-center">
                                                <input type="number" class="form-control cl-form-control"
                                                    id="net-price">
                                            </td>
                                            <td class="text-center">
                                                <a href="#">
                                                    <i class="bi bi-arrow-clockwise text-warning"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endfor
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="transportation-tab" role="tabpanel"
                tabindex="0">
                Transportation-tab
            </div>
            <div class="tab-pane fade" id="install-invoice-tab" role="tabpanel"
                tabindex="0">
                Install-invoice-tab
            </div>
            <div class="tab-pane fade" id="install-from-category-tab" role="tabpanel"
                tabindex="0">
                Install-from-category-tab
            </div>
        </div>
    </div>
     
</div>
@endsection
@section('script')

<script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script> 
{{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/product/inventory-default.js') }}"></script> --}}
    {{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/') }}"></script> --}}
    {{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/product/purchase/purchase.js') }}"></script> --}}
    <script>
        select2('select_2', 'Select', false);
            // $(".select_2").select2();
 
    </script>
@endsection