@extends('master')

@section('css')
    <!-- daterange picker -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css') }}">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet"
        href="{{ asset('assets/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
@endsection

@section('contant')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Sweet Forms</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('payments.index') }}">Sweet Forms</a></li>
                            <li class="breadcrumb-item active">Add</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Sweet Form</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form action="{{ route('payments.store') }}" method="POST">@csrf
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="form_number">Form Number</label>
                                                <input type="text" class="form-control" id="form_number"
                                                    name="form_number" value="{{ old('form_number') }}"
                                                    placeholder="Enter Form Number">
                                                @error('form_number')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="added_date">Date</label>

                                                <div class="input-group date" id="added_date" data-target-input="nearest">
                                                    <input type="text" class="form-control datetimepicker-input"
                                                        data-target="#added_date" id="added_date" name="added_date"
                                                        value="{{ old('added_date') }}" placeholder="Enter Date" />
                                                    <div class="input-group-append" data-target="#added_date"
                                                        data-toggle="datetimepicker">
                                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                    </div>
                                                    @error('added_date')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control" id="name" name="name"
                                            value="{{ old('name') }}" placeholder="Enter Name">
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="price">Mobile Number</label>
                                        <input type="number" min="0" class="form-control" id="mobile_number"
                                            name="mobile_number" value="{{ old('mobile_number') }}"
                                            placeholder="Enter Mobile Number">
                                        @error('mobile_number')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="address">Address</label>
                                        <textarea class="form-control" name="address" id="address" cols="30" rows="5">{{ old('address') }}</textarea>
                                        @error('address')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="is_paid">Paid</label><br>
                                                <input type="checkbox" name="is_paid" id="is_paid"
                                                    value="{{ old('is_paid', 1) }}" checked data-bootstrap-switch
                                                    data-off-color="danger" data-on-color="success" data-on-text="Paid"
                                                    data-off-text="Unpaid">
                                                @error('is_paid')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="is_delivered">Delivered</label><br>
                                                <input type="checkbox" name="is_delivered" id="is_delivered"
                                                    value="{{ old('is_delivered', 1) }}" checked data-bootstrap-switch
                                                    data-off-color="danger" data-on-color="success"
                                                    data-on-text="Delivered" data-off-text="Pending">
                                                @error('is_delivered')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Order Items</h3>
                                        </div>
                                        <!-- /.card-header -->
                                        <div class="card-body table-responsive p-0">
                                            <table class="table table-hover text-nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>Sweet</th>
                                                        <th>Price</th>
                                                        <th>Package</th>
                                                        <th>Quantity</th>
                                                        <th>Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($categories as $category)
                                                        <input type="hidden" name="categories[{{ $category->id }}][id]"
                                                            value="{{ $category->id }}">
                                                        <tr>
                                                            <td>{{ $category->name }}</td>
                                                            <td>₹ {{ $category->price }}</td>
                                                            <td>500 GM</td>
                                                            <td>
                                                                <input type="number" class="form-control quantity"
                                                                    name="categories[{{ $category->id }}][quantity]"
                                                                    id="quantity_{{ $category->id }}" min="0"
                                                                    data-id="{{ $category->id }}"
                                                                    data-price="{{ (float) $category->price }}">
                                                                @error('categories[][id]')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </td>
                                                            <td><input type="text" readonly class="form-control"
                                                                    name="categories[{{ $category->id }}][total]" style="width: 90px;"
                                                                    id="total_{{ $category->id }}"></td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- /.card-body -->
                                    </div>

                                    <div class="form-group">
                                        <label for="remark">Remark</label>
                                        <textarea class="form-control" name="remark" id="remark" cols="30" rows="5">{{ old('remark') }}</textarea>
                                        @error('remark')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <a href="{{ route('payments.index') }}" class="btn btn-dark me-2">Back</a>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('js')
    <!-- InputMask -->
    <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
    <!-- date-range-picker -->
    <script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="{{ asset('assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
    <!-- Bootstrap Switch -->
    <script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <script>
        $('#added_date').datetimepicker({
            format: 'DD-MM-yyyy',
            defaultDate: new Date(),
        });

        $("input[data-bootstrap-switch]").each(function() {
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        })

        $('.quantity').on('keyup', function() {
            var id = $(this).data('id');
            var price = $(this).data('price');
            var quantity = $(this).val();
            var total = price * quantity;
            $('#total_' + id).val(total);
        });
    </script>
@endsection