@extends('layout.master')
@section('content')
    <div class="content company_details">
        <div class="">
            <div class="row">
                <div class="col-12 col-xl-2 col-md-2 col-sm-12 order-1 order-xl-0"></div>
                <div class="col-12 col-xl-8 col-md-8 col-sm-12 order-1 order-xl-0">
                    <div class="mb-9">
                        <div class="card shadow-none border my-4" data-component-card="data-component-card">
                            <div class="card-header p-4 border-bottom bg-body">
                                <div class="row g-3 justify-content-between align-items-center">
                                    <div class="col-12 col-md">
                                        <h4 class="text-body mb-0" data-anchor="data-anchor">Send Custom Mail
                                        </h4>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body p-0">
                                <div class="p-4 code-to-copy">

                                    <form class="row g-3" action="{{ route('custom_mail') }}" method="POST"
                                        enctype="multipart/form-data">

                                        @csrf

                                        <div class="col-md-12">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input is_gst_bill" id="inlineRadio1" type="radio"
                                                    name="is_gst_bill" value="0" checked>
                                                <label class="form-check-label" for="inlineRadio1">Without GST</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input is_gst_bill" id="inlineRadio2" type="radio"
                                                    name="is_gst_bill" value="1">
                                                <label class="form-check-label" for="inlineRadio2">With GST</label>
                                            </div>

                                        </div>

                                        <div class="col-md-12 gst_no_div d-none">

                                            <div class="alert alert-info d-block p-2">{{ get_setting_data('gst') }}% GST
                                                Will be applied</div>

                                            <label class="form-label" for="title">GST NO.
                                            </label>
                                            <input class="form-control" name="gst_no" id="gst_no" type="text"
                                                value="{{ old('gst_no') }}" />
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="title">Transaction Date <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control datetimepicker flatpickr-input active"
                                                id="datepicker" type="text" placeholder="dd/mm/yyyy"
                                                name="transaction_date" value=""
                                                data-options="{'disableMobile':true,'dateFormat':'Y-m-d'}"
                                                readonly="readonly">

                                            @error('transaction_date')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="title">Employee Name <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control" name="employee_name" id="employee_name"
                                                type="text" value="{{ old('employee_name') }}" required="" />
                                            @error('employee_name')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="title">Client Name <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control" name="client_name" id="client_name" type="text"
                                                value="{{ old('client_name') }}" required="" />
                                            @error('client_name')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="title">Client Email <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control" name="client_email" id="client_email" type="text"
                                                value="{{ old('client_email') }}" required="" />
                                            @error('client_email')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="title">Client Phone <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control numberonly" name="client_phone" id="client_phone"
                                                type="text" value="{{ old('client_phone') }}" required="" />
                                            @error('client_phone')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="title">Client Address <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control" name="client_address" id="client_address"
                                                type="text" value="{{ old('client_address') }}" required="" />
                                            @error('client_address')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="from_date">From Date <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control datetimepicker flatpickr-input active"
                                                id="datepicker" type="text" placeholder="dd/mm/yyyy" name="from_date"
                                                value="" data-options="{'disableMobile':true,'dateFormat':'Y-m-d'}"
                                                readonly="readonly">

                                            @error('from_date')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="to_date">To Date <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control datetimepicker flatpickr-input active"
                                                id="datepicker" type="text" placeholder="dd/mm/yyyy" name="to_date"
                                                value="" data-options="{'disableMobile':true,'dateFormat':'Y-m-d'}"
                                                readonly="readonly">

                                            @error('to_date')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-12">
                                            <label class="form-label" for="title">Service Name <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control" name="service_name" id="service_name"
                                                type="text" value="{{ old('service_name') }}" required="" />
                                            @error('service_name')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="title">Service Cost <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control numberonly" onkeyup="calculateTotal()"
                                                name="amount" id="amount" type="text"
                                                value="{{ old('amount', 0) }}" required="" />
                                            @error('amount')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="pay_amount">Pay Amount <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <input class="form-control numberonly" onkeyup="calculateTotal()"
                                                name="pay_amount" id="pay_amount" type="text"
                                                value="{{ old('pay_amount', 0) }}" required="" />
                                            @error('pay_amount')
                                                <div class="col-form-alert-label">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="total_amount">Total Amount
                                            </label>
                                            <input class="form-control numberonly" id="total_amount" disabled
                                                type="text" value="0" />

                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label" for="remaining_amount">Remaining Amount
                                            </label>
                                            <input class="form-control numberonly" id="remaining_amount" disabled
                                                type="text" value="0" />

                                        </div>

                                        <div class="col-12">
                                            <button class="btn btn-primary" type="submit">Send Mail</button>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xl-4 col-md-4 col-sm-12 order-1 order-xl-0"></div>

            </div>
        </div>
    </div>
@section('script')
    <script>
        $(document).ready(function() {

            $(".is_gst_bill").click(function() {
                var checkedVal = $(".is_gst_bill:checked").val();

                if (checkedVal == "1") {
                    $(".gst_no_div").removeClass("d-none");

                } else {
                    $(".gst_no_div").addClass("d-none");

                }
                calculateTotal();
            })
        });

        function calculateTotal() {
            var gstChecked = $(".is_gst_bill:checked").val();
            var gst = "{{ get_setting_data('gst') }}";

            var service_amount = $("#amount").val() == "" ? 0 : $("#amount").val();
            var pay_amount = $("#pay_amount").val() == "" ? 0 : $("#pay_amount").val();

            // var final_service_amount = parseFloat(service_amount)
            // //  - parseFloat(
            // //     pay_amount);
            var gst_total_amount = 0;
            if (gstChecked == "1") {

                var gst_total_amount = (service_amount * gst) / 100;
            }

            var net_total_amount = parseFloat(gst_total_amount) + parseFloat(
                service_amount);
            $("#total_amount").val(net_total_amount);
            $("#remaining_amount").val(parseFloat(net_total_amount) - parseFloat(pay_amount));
        }
    </script>
@endsection
@endsection